createImg(store, data) {
let timer = setTimeout(function (params) {
let _canvas = document.querySelector(".setPictureSection");
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
var canvas2 = document.createElement("canvas");
var scale = 2; canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
canvas2.getContext("2d").scale(scale, scale); html2canvas(document.querySelector(".setPictureSection"), {
// allowTaint: true,
// taintTest: false,
scale: 1,
dpi: window.devicePixelRatio * 5,
// canvas: canvas2,
userCORS: true,
backgroundColor: '#ffffff',
width: w,
height: h,
x: 0,
y: 0,
}).then(function (canvas) {
//document.body.appendChild(canvas);
//canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载
document.querySelector(".down")
.setAttribute("href", canvas.toDataURL("image/png", 1.0));
$(".down")[0].click(); });
timer = null;
}, 350)
},

  

h5 图片生成的更多相关文章

  1. H5图片裁剪升级版

    前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...

  2. h5自动生成工具

    一.前言 写了很多h5之后,对于写手写html和css已经麻木的我决定动手写个工具自动生成h5结构和样式.其实这个想法由来已久,但总是觉得自己技术不够,所以一直没实行.直到某天我真的写够了,我决定动手 ...

  3. H5图片裁剪升级版(手机版)

    前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...

  4. H5 图片上传

    1.h5 图片异步上传 (1) 异步上传input触发onchange事件的时候,就把图片上传至服务器.后台可能会返回图片的链接等信息,前台可以把图片信息展示给用户看. (2) 另一种情况可能需要前台 ...

  5. thinkphp3.2与phpexcel带图片生成 完美案例

    thinkphp3.2与phpexcel完美案例 // 导出exl public function look_down(){ $id = I('get.id'); $m = M ('offer_goo ...

  6. phpcms v9图片生成缩略图变成黑色解决方法

    今天客户反映,上传的图片生成缩略图有的图片变成黑色,出现问题就百度了一下,有不少网友也遇到这样的问题,但是官方论坛也没有给出解决办法,那还得靠自己解决了,于是就研究phpcms v9 图片压缩代码.打 ...

  7. 验证码图片生成工具类——Captcha.java

    验证码图片生成工具,使用JAVA生成的图片验证码,调用getRandcode方法获取图片验证码,以流的方式传输到前端页面. 源码如下:(点击下载  Captcha.java) import java. ...

  8. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  9. Android长方形图片生成正圆形,以及矩形图片生成圆角

    一般要做正圆形图片,只能是正方形的基础上才能实现,否则就变成椭圆了,下面说说如何使长方形的图片生成正圆形图片 废话不多说,没图没真相,先上图吧: 原图:  变成正圆后:  下面上代码: public ...

随机推荐

  1. [转][Dapper]参数化查询慢

      参考:https://www.cnblogs.com/wy123/p/7190785.html 参考:https://www.cnblogs.com/Irving/p/3951220.html i ...

  2. mysql为什么要分库分表?

    1 基本思想之什么是分库分表?从字面上简单理解,就是把原本存储于一个库的数据分块存储到多个库上,把原本存储于一个表的数据分块存储到多个表上. 2 基本思想之为什么要分库分表? 单表操作数据量有最优值, ...

  3. T-SQL 局部变量和全局变量

    局部变量 use StudentManageDB go --声明学号变量 ) --查询李铭的信息 set @stuname='李铭' select StudentId,StudentName,Gend ...

  4. synchronous-request-with-websockets

    https://stackoverflow.com/questions/13417000/synchronous-request-with-websockets

  5. Epic Games工程师分享:如何在移动平台上做UE4的UI优化?

    转自:https://blog.csdn.net/debugconsole/article/details/79281290 随着技术的不断升级,高性能的引擎逐渐受到越来越多研发商的青睐,UE4就是其 ...

  6. 理解HDFS高可用性架构

    在Hadoop1.x版本的时候,Namenode存在着单点失效的问题.如果namenode失效了,那么所有的基于HDFS的客户端——包括MapReduce作业均无法读,写或列文件,因为namenode ...

  7. django模板(template)

    模板层(template) 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. 1 2 3 4 def current_datetime ...

  8. windows模拟linux部分功能

    --------------------------------------------分割线----------------------------------------------- 系统 wi ...

  9. ob系列函数中常用函数

    ob_start();                //打开一个输出缓冲区,所有的输出信息不再直接发送到浏览器,而是保存在输出缓冲区里面. ob_clean();               //删 ...

  10. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...