代码实现

<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. 探索如何在java中执行python脚本

    一个偶然的场景,笔者需要在java代码中执行某个python脚本,并且需要向脚本中传递参数,有可能的话,还要获取该脚本的某些执行结果,回到主程序中继续执行下去. 没有思路之前,狭隘的想法是,java中 ...

  2. shell脚本定时任务转移项目日志

    1.之前同时项目部署在根目录,根目录磁盘空间40G,运行一年后日志占了18G的磁盘空间, 根目录只有几个G的磁盘空间,现在写shell脚本定时转移日志文件到挂载的磁盘目录下 2.编写shell脚本 # ...

  3. spark2.0.1源码编译

    一.编译源码步骤演示详解 . 编译spark环境要求 1.必须在linux系统下编译(以centos6.4为例) 2.编译使用的JDK版本必须是1.6以上(以JDK1.8为例) 3.编译需要使用Mav ...

  4. 分区函数Partition by使用

    1.PARTITION BY使用 基本语法 over(partition by col1 order by col2): select t.*,row_number() over( order by ...

  5. lombok.config

    # 声明该配置文件是一个根配置文件,从该配置文件所在的目录开始扫描 config.stopBubbling=true # 全局配置 equalsAndHashCode 的 callSuper 属性为t ...

  6. MobaXterm汉化版教程

    MobaXterm中文版是一款非常好用的远程连接.远程控制软件,它堪称全能终端神器,支持非常多的远程协议 ,如SSH,Telnet,Rsh,Xdmc,RDP,VNC,FTP,SFTP,串口(Seria ...

  7. centos7 elasticsearch集群安装

    1.下载安装包 https://www.elastic.co/cn/downloads/past-releases#elasticsearch elasticsearch-7.6.1-linux-x8 ...

  8. kubeshpere 相关配置

    1.配置maven镜像仓库 1.1.查找ks-devops-agent 平台管理 -> 集群管理 -> 配置中心 -> 配置 -> 检索 ks-devops-agent 1.2 ...

  9. Dockerfile打包java应用

    #基础镜像 FROM openjdk:8-jre # 作者 MAINTAINER hg #挂载目录 VOLUME /home/hg #创建目录 RUN mkdir /home/hg #指定工作目录 W ...

  10. 通过ESP8266WiFi模块调用“心知天气”接口 获取天气信息

    在分析代码之前,首先介绍 ArduinoJson 库的安装及"心知天气"的ID申请 一.安装 ArduinoJson 库 进入 Arduino 开发环境后,选择菜单栏-->工 ...