代码实现

<div class="pho-bg">
<img src="../../assets/images/FeedbackActivity/poster1.png" alt="" id="main2">
<img src="" alt="" id="main1">
</div>
<div class="share-photos" v-show="drawShow">
<div class="posters-photos">
<canvas id="myCanvas" width="300" height="500" ref="index" v-show="false"></canvas>
<div class="photo" id="captureId"></div>
<div class="saveBtn" @click='savePic'>保存图片</div> </div>
</div>
<div id="qrcode" ref="qrcode" style="margin-bottom: 1.2rem;" v-show="false"></div>//绘制二维码

实现原理,找到X轴,Y轴位置及大小控制


 downLoad(){
  document.getElementById('qrcode').innerHTML = ''
  let qrCode='http://www.XXX.com/'//图片路径
  let url=qrCode
  let qrcode = new QRCode('qrcode', {
     width: 60,
     height: 60,
     text:'',
     colorDark: "#000",
     colorLight: "#fff",
     correctLevel : QRCode.CorrectLevel.H 
   })
    qrcode.clear()
    qrcode.makeCode(url) 
 },
 shareShow() {
   let qrcode = $('#qrcode')
   let canvas = qrcode.find('canvas').get(0)
   $('#main1').attr('src', canvas.toDataURL('image/jpg')) //某一状态将绘制的二维码赋给要拼接的图片中
 },
saveImg(){//拼接图片
let main1 = document.getElementById('main1')
let main2 = document.getElementById('main2')
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.width = 280
canvas.height = 500
//main1.setAttribute('crossOrigin', 'anonymous')//图片是否跨域,服务器亲测有效,当然这可以不用也能保存
ctx.rect(0, 0, 280, 500);
ctx.drawImage(main2, 0, 0, 280, 500)
ctx.drawImage(main1, 14, 437, 50, 50)
var newImg = new Image();
var dataUrl = canvas.toDataURL();
newImg = document.createElement("img");
newImg.src = dataUrl;
$('.photo').append(newImg);
},
 savePic(){
     let myCanvas = document.getElementsByClassName('savaImg')[0].getElementsByTagName('canvas');
     let Url = myCanvas[0].toDataURL('image/png')//用手机点击保存无效,得图片上传到服务器
     var blob=new Blob([''], {type:'application/octet-stream'}); 
     var url = URL.createObjectURL(blob); 
     var a = document.createElement('a'); 
     a.href = Url; 
     a.download = "下载的图片"; 
     var e = document.createEvent('MouseEvents'); 
     e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     a.dispatchEvent(e); 
     URL.revokeObjectURL(url); 
 },

canvas合并图片并长按保存的更多相关文章

  1. H5 中html 页面存为图片并长按 保存

    最近接到的一个新需求:页面一个静态H5,中间有一页是输入信息,然后跳转到最后一页,自动将页面生成图片,用户可以长按图片保存到手机上. 展示一下最后一页的样子: 刚拿到这个需求,在网上看了很多文章,最普 ...

  2. Android Base64图片无法长按保存 问题解决

    踩了一个巨坑. 目前微信ios/android 均能长按保存src=base64的图片  (微信android x5 专门解决了这个问题); 但是android其他App没有针对解决这个系统问题(姑且 ...

  3. 前端canvas合并图片两种实现方式

    ---恢复内容开始--- 需求: 有一个固定的背景图,还有一个是随机生成的二维码,合并成一张图,让用户下载. 实现一:纯手写,这里为了省事生成图片我直接给的base64,其实使用qrcode.js生成 ...

  4. h5页面转图片长按保存

    5页面经常会遇到此类需求.将最后的结果页转换为图片长按保存.下面介绍一下实现此需求的过程 1,依赖安装 cnpm install html2canvas --save 2,依赖引入,使用 绑定 初始化 ...

  5. html中canvas渲染图片,并转化成base64格式保存

    最近在做一个上传头像然后保存显示的功能,因为涉及到裁剪大小和尺寸比例,所以直接上传图片再展示的话,就会出现问题,所以就想用canvas来渲染裁剪后的图片,然后转化成base64格式的图片再存储,这样取 ...

  6. 减少HTTP请求之合并图片详解(大型网站优化技术)

    原文:减少HTTP请求之合并图片详解(大型网站优化技术) 一.相关知识讲解 看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在 ...

  7. Canvas 实现图片合成并下载合成图片

    现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...

  8. canvas学习笔记:canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  9. C#放缩、截取、合并图片并生成高质量新图的类

    原文:C#放缩.截取.合并图片并生成高质量新图的类 using System;using System.Drawing;using System.Drawing.Imaging;using Syste ...

  10. C#一些常用的图片操作方法:生成文字图片 合并图片等

    生成文字图片: /// <summary> /// 生成文字图片 /// </summary> /// <param name="text">& ...

随机推荐

  1. vue2和vue3配置全局自定义参数及vue3动态绑定ref

    在 Vue2.x 中我们可以通过 Vue.prototype 添加全局属性 property.但是在 Vue3.x 中需要将 Vue.prototype 替换为 config.globalProper ...

  2. WPF-序列化

    public class SerializeHelper { #region 二进制格式 /// <summary> /// Binary 序列化使用前需要标记类可序列化 /// < ...

  3. 题解 【POJ3728】The merchant(LCA)

    题意:一棵树有N个城市,每个城市商品价格不一样,Q个询问,问从u出发到达v点,每个城市只能经过一次的最大利润 max min数组存u城到u的第2^i个祖先路径上的最值 答案就是u-v路径上的最大值-最 ...

  4. 【azw3】麻省理工深度思考法:从模型及动力机制来思考现象

    书本详情 标题:麻省理工深度思考法:从模型及动力机制来思考现象作者:[日]平井孝志 著:张玉虹 译年份:2018出版社:北京:中国华侨出版社ISBN:9787511373441,7511373445格 ...

  5. 第二性 合卷本 横本.EPUB

    书本详情 第二性台版 作者: 西蒙.德.波娃(Simone de Beauvoir)出版社: 貓頭鷹原作名: Le Deuxième Sexe译者: 邱瑞鑾出版年: 2013-10页数: 1136装帧 ...

  6. vue用echarts不显示

    在html页面中套vue的情况来使用echarts,或者单独vue使用echarts,出现页面不渲染图表,代码渲染有的情况,加个this.$nextTick(()=>{})让他主动渲染一下就可以 ...

  7. 有道翻译-JS逆向-api调用

    简单方法 -调用开源api 这个比较简单四行代码就可以搞定,先放代码: 1 import requests 2 while True: 3 input_data = input('请输入你要翻译的数据 ...

  8. Nginx/1.13.3热升级1.21.6

    背景: 根据其服务器响应标头,安装的 nginx 版本为低于 1.16.1 的 1.9.5,或是低于 1.17.3 的 1.17.x.因此,它受到多种拒绝服务漏洞的影响: - HTTP/2 协议堆栈中 ...

  9. 请求浏览器重新加载数据/返回前端Json 数据

    右键检查 seeting network dissable cache 勾选上 ================================== from django.http import J ...

  10. 《Rust权威指南》学习笔记——8.通用集合类型

    Rust通用集合类型 动态数组Vec 字符串String 和&str 哈希映射HashMap