canvas合并图片并长按保存
代码实现
<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轴位置及大小控制
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);
},
canvas合并图片并长按保存的更多相关文章
- H5 中html 页面存为图片并长按 保存
最近接到的一个新需求:页面一个静态H5,中间有一页是输入信息,然后跳转到最后一页,自动将页面生成图片,用户可以长按图片保存到手机上. 展示一下最后一页的样子: 刚拿到这个需求,在网上看了很多文章,最普 ...
- Android Base64图片无法长按保存 问题解决
踩了一个巨坑. 目前微信ios/android 均能长按保存src=base64的图片 (微信android x5 专门解决了这个问题); 但是android其他App没有针对解决这个系统问题(姑且 ...
- 前端canvas合并图片两种实现方式
---恢复内容开始--- 需求: 有一个固定的背景图,还有一个是随机生成的二维码,合并成一张图,让用户下载. 实现一:纯手写,这里为了省事生成图片我直接给的base64,其实使用qrcode.js生成 ...
- h5页面转图片长按保存
5页面经常会遇到此类需求.将最后的结果页转换为图片长按保存.下面介绍一下实现此需求的过程 1,依赖安装 cnpm install html2canvas --save 2,依赖引入,使用 绑定 初始化 ...
- html中canvas渲染图片,并转化成base64格式保存
最近在做一个上传头像然后保存显示的功能,因为涉及到裁剪大小和尺寸比例,所以直接上传图片再展示的话,就会出现问题,所以就想用canvas来渲染裁剪后的图片,然后转化成base64格式的图片再存储,这样取 ...
- 减少HTTP请求之合并图片详解(大型网站优化技术)
原文:减少HTTP请求之合并图片详解(大型网站优化技术) 一.相关知识讲解 看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在 ...
- Canvas 实现图片合成并下载合成图片
现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...
- canvas学习笔记:canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
- C#放缩、截取、合并图片并生成高质量新图的类
原文:C#放缩.截取.合并图片并生成高质量新图的类 using System;using System.Drawing;using System.Drawing.Imaging;using Syste ...
- C#一些常用的图片操作方法:生成文字图片 合并图片等
生成文字图片: /// <summary> /// 生成文字图片 /// </summary> /// <param name="text">& ...
随机推荐
- 探索如何在java中执行python脚本
一个偶然的场景,笔者需要在java代码中执行某个python脚本,并且需要向脚本中传递参数,有可能的话,还要获取该脚本的某些执行结果,回到主程序中继续执行下去. 没有思路之前,狭隘的想法是,java中 ...
- shell脚本定时任务转移项目日志
1.之前同时项目部署在根目录,根目录磁盘空间40G,运行一年后日志占了18G的磁盘空间, 根目录只有几个G的磁盘空间,现在写shell脚本定时转移日志文件到挂载的磁盘目录下 2.编写shell脚本 # ...
- spark2.0.1源码编译
一.编译源码步骤演示详解 . 编译spark环境要求 1.必须在linux系统下编译(以centos6.4为例) 2.编译使用的JDK版本必须是1.6以上(以JDK1.8为例) 3.编译需要使用Mav ...
- 分区函数Partition by使用
1.PARTITION BY使用 基本语法 over(partition by col1 order by col2): select t.*,row_number() over( order by ...
- lombok.config
# 声明该配置文件是一个根配置文件,从该配置文件所在的目录开始扫描 config.stopBubbling=true # 全局配置 equalsAndHashCode 的 callSuper 属性为t ...
- MobaXterm汉化版教程
MobaXterm中文版是一款非常好用的远程连接.远程控制软件,它堪称全能终端神器,支持非常多的远程协议 ,如SSH,Telnet,Rsh,Xdmc,RDP,VNC,FTP,SFTP,串口(Seria ...
- centos7 elasticsearch集群安装
1.下载安装包 https://www.elastic.co/cn/downloads/past-releases#elasticsearch elasticsearch-7.6.1-linux-x8 ...
- kubeshpere 相关配置
1.配置maven镜像仓库 1.1.查找ks-devops-agent 平台管理 -> 集群管理 -> 配置中心 -> 配置 -> 检索 ks-devops-agent 1.2 ...
- Dockerfile打包java应用
#基础镜像 FROM openjdk:8-jre # 作者 MAINTAINER hg #挂载目录 VOLUME /home/hg #创建目录 RUN mkdir /home/hg #指定工作目录 W ...
- 通过ESP8266WiFi模块调用“心知天气”接口 获取天气信息
在分析代码之前,首先介绍 ArduinoJson 库的安装及"心知天气"的ID申请 一.安装 ArduinoJson 库 进入 Arduino 开发环境后,选择菜单栏-->工 ...