Hello, world!

(这个有问题,最近会把整理后的更新上去!!!!!!)

最新最新!!!:https://blog.csdn.net/zuorishu/article/details/88632978

需求背景:

 分享图片,图片中含有自己分享链接生成的二维码!!

大体思路:

开干:

首先来生成二维码,之前都是使用jQuery.qrcode这个插件进行二维码生成,使用vuejs后不想依赖jQuery,就重新找了一个

qrcanvas,使用方法上篇博客有提到,这里结合图片再来引用一下。

1.npm安装:npm install qrcanvas

2.页面引入:import { qrcanvas } from 'qrcanvas';

3.html:写一个带id(id自定义)的div

  1. <template>
  2. <div class="container">
  3. <div class="box" ref="box">
  4. <div id="qrcode"></div>
  5. </div>
  6. </div>
  7. </template>

4.js很简单

  1. created() {
  2. let that = this;
  3. that.$nextTick(function () {
  4. var canvas1 = qrcanvas({
  5. data: decodeURIComponent(that.$route.query.url), //分享链接(根据需求来)
  6. size:128 //二维码大小
  7. });
  8. document.getElementById("qrcode").innerHTML = '';
  9. document.getElementById('qrcode').appendChild(canvas1);
  10. })
  11. },

到这里二维码也就生成了,下面要实现二维码和图片进行合成,因为需求图片是固定一张,所以不用去处理图片动态改变的逻辑,图片直接就在本地引用了。首先要把图片放到页面上,二维码在图片上的具体位置根据需求自己css处理。html改造:

  1. <template>
  2. <div class="container">
  3. <div class="box" ref="box">
  4. <!-- 图片 -->
  5. <img src="../assets/images/activity/txvip.jpeg" alt="分享背景图">
  6. <!-- 二维码 -->
  7. <div id="qrcode" class="qrcode"></div>
  8. </div>
  9. </div>
  10. </template>

放完图片以后,接下来就是处理图片合成的问题。这里我用的是 html2canvas 这个插件,将html DOM元素或页面利用canvas画布生成图片。下面说一下用法:

1.npm安装

npm install html2canvas --save

2.页面引入

import html2canvas from 'html2canvas';

3.js很简单

  1. //that.$refs.box 生成图片的dom元素
  2. html2canvas(that.$refs.box).then(function(canvas) {
  3. console.log(canvas) //生成canvas画布
  4. console.log(canvas.toDataURL()) //将canvas转为base64图片
  5. });

目前发现一个问题:针对微信内置浏览器是不支持base64格式长按的一些操作(因为以下是直接base64展示的);

解决办发:转成base64以后上传到后台存储到服务器,通过后台返回图片链接展示到页面上。。。

到这里图片就生成了,那么就是展示图片以并可以长按保存,没有做分享处理。接着再改造html

  1. <template>
  2. <div class="container">
  3. <!-- 最后生成的图片展示 -->
  4. <div class="share-img">
  5. <img :src="imgUrl" alt="分享图片">
  6. </div>
  7. <!-- 生成图片的DOM -->
  8. <div class="box" ref="box">
  9. <img src="../assets/images/activity/txvip.jpeg" alt="分享背景图">
  10. <div id="qrcode" class="qrcode"></div>
  11. </div>
  12. </div>
  13. </template>

生成新的图片以后页面上生成图片的DOM并没有隐藏掉,自己可以通过css或js处理。

看一下完整代码吧:

  1. <!-- 分享图片生成 -->
  2. <template>
  3. <div class="container">
  4. <div class="share-img">
  5. <img :src="imgUrl" alt="分享图">
  6. </div>
  7. <div class="creat-img" ref="box">
  8. <img src="../assets/images/activity/txvip.jpeg" alt="分享背景图">
  9. <div id="qrcode" class="qrcode"></div>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import { qrcanvas } from 'qrcanvas';
  15. import html2canvas from 'html2canvas';
  16. export default {
  17. data () {
  18. return {
  19. imgUrl:'',
  20. }
  21. },
  22. watch:{
  23. imgUrl(val,oldval){
  24. //监听到imgUrl有变化以后 说明新图片已经生成 隐藏DOM
  25. this.$refs.box.style.display = "none";
  26. }
  27. },
  28. created() {
  29. let that = this;
  30. that.$nextTick(function () {
  31. //生成二维码
  32. var canvas1 = qrcanvas({
  33. data: decodeURIComponent(that.$route.query.url),
  34. size:128
  35. });
  36. document.getElementById("qrcode").innerHTML = '';
  37. document.getElementById('qrcode').appendChild(canvas1);
  38. //合成分享图
  39. that.$indicator.open({
  40. text: '正在生成图片...',
  41. spinnerType: 'fading-circle'
  42. });
  43. html2canvas(that.$refs.box).then(function(canvas) {
  44. that.imgUrl = URL.createObjectURL(that.base64ToBlob(canvas.toDataURL()))
  45. setTimeout(()=>{
  46. that.$indicator.close();
  47. that.$toast({
  48. message: '图片已生成,长按保存分享给你的好友吧',
  49. position: 'middle',
  50. duration: 3000
  51. });
  52. },2000)
  53. });
  54. })
  55. },
  56. methods: {
  57. //base64转blob
  58. base64ToBlob(code) {
  59. let parts = code.split(';base64,');
  60. let contentType = parts[0].split(':')[1];
  61. let raw = window.atob(parts[1]);
  62. let rawLength = raw.length;
  63. let uInt8Array = new Uint8Array(rawLength);
  64. for (let i = 0; i < rawLength; ++i) {
  65. uInt8Array[i] = raw.charCodeAt(i);
  66. }
  67. return new Blob([uInt8Array], {type: contentType});
  68. },
  69. }
  70. }
  71. </script>
  72. <style lang='scss' scoped>
  73. .creat-img{
  74. img{
  75. z-index: 3;
  76. }
  77. .qrcode{
  78. position: absolute;
  79. bottom: .15rem;
  80. left: 50%;
  81. margin-left: -64px;
  82. z-index: 5;
  83. }
  84. }
  85. </style>

刚开始写,大体能用,有不足的地方请多指教!