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">& ...
随机推荐
- vue2和vue3配置全局自定义参数及vue3动态绑定ref
在 Vue2.x 中我们可以通过 Vue.prototype 添加全局属性 property.但是在 Vue3.x 中需要将 Vue.prototype 替换为 config.globalProper ...
- WPF-序列化
public class SerializeHelper { #region 二进制格式 /// <summary> /// Binary 序列化使用前需要标记类可序列化 /// < ...
- 题解 【POJ3728】The merchant(LCA)
题意:一棵树有N个城市,每个城市商品价格不一样,Q个询问,问从u出发到达v点,每个城市只能经过一次的最大利润 max min数组存u城到u的第2^i个祖先路径上的最值 答案就是u-v路径上的最大值-最 ...
- 【azw3】麻省理工深度思考法:从模型及动力机制来思考现象
书本详情 标题:麻省理工深度思考法:从模型及动力机制来思考现象作者:[日]平井孝志 著:张玉虹 译年份:2018出版社:北京:中国华侨出版社ISBN:9787511373441,7511373445格 ...
- 第二性 合卷本 横本.EPUB
书本详情 第二性台版 作者: 西蒙.德.波娃(Simone de Beauvoir)出版社: 貓頭鷹原作名: Le Deuxième Sexe译者: 邱瑞鑾出版年: 2013-10页数: 1136装帧 ...
- vue用echarts不显示
在html页面中套vue的情况来使用echarts,或者单独vue使用echarts,出现页面不渲染图表,代码渲染有的情况,加个this.$nextTick(()=>{})让他主动渲染一下就可以 ...
- 有道翻译-JS逆向-api调用
简单方法 -调用开源api 这个比较简单四行代码就可以搞定,先放代码: 1 import requests 2 while True: 3 input_data = input('请输入你要翻译的数据 ...
- Nginx/1.13.3热升级1.21.6
背景: 根据其服务器响应标头,安装的 nginx 版本为低于 1.16.1 的 1.9.5,或是低于 1.17.3 的 1.17.x.因此,它受到多种拒绝服务漏洞的影响: - HTTP/2 协议堆栈中 ...
- 请求浏览器重新加载数据/返回前端Json 数据
右键检查 seeting network dissable cache 勾选上 ================================== from django.http import J ...
- 《Rust权威指南》学习笔记——8.通用集合类型
Rust通用集合类型 动态数组Vec 字符串String 和&str 哈希映射HashMap