h5 图片生成
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 图片生成的更多相关文章
- H5图片裁剪升级版
前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...
- h5自动生成工具
一.前言 写了很多h5之后,对于写手写html和css已经麻木的我决定动手写个工具自动生成h5结构和样式.其实这个想法由来已久,但总是觉得自己技术不够,所以一直没实行.直到某天我真的写够了,我决定动手 ...
- H5图片裁剪升级版(手机版)
前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...
- H5 图片上传
1.h5 图片异步上传 (1) 异步上传input触发onchange事件的时候,就把图片上传至服务器.后台可能会返回图片的链接等信息,前台可以把图片信息展示给用户看. (2) 另一种情况可能需要前台 ...
- thinkphp3.2与phpexcel带图片生成 完美案例
thinkphp3.2与phpexcel完美案例 // 导出exl public function look_down(){ $id = I('get.id'); $m = M ('offer_goo ...
- phpcms v9图片生成缩略图变成黑色解决方法
今天客户反映,上传的图片生成缩略图有的图片变成黑色,出现问题就百度了一下,有不少网友也遇到这样的问题,但是官方论坛也没有给出解决办法,那还得靠自己解决了,于是就研究phpcms v9 图片压缩代码.打 ...
- 验证码图片生成工具类——Captcha.java
验证码图片生成工具,使用JAVA生成的图片验证码,调用getRandcode方法获取图片验证码,以流的方式传输到前端页面. 源码如下:(点击下载 Captcha.java) import java. ...
- CSS3鼠标移入移出图片生成随机动画
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...
- Android长方形图片生成正圆形,以及矩形图片生成圆角
一般要做正圆形图片,只能是正方形的基础上才能实现,否则就变成椭圆了,下面说说如何使长方形的图片生成正圆形图片 废话不多说,没图没真相,先上图吧: 原图: 变成正圆后: 下面上代码: public ...
随机推荐
- 廖雪峰Java5集合-2List-1使用List
1.List定义 List是一种有序链表: List内部按照元素的先后顺序存放 每个元素都可以通过索引确定自己的位置 类似数组,但大小可变 //List<E>是一种有序链表: //* Li ...
- PHPer常见的面试题总结
1.平时喜欢哪些php书籍及博客?CSDN.虎嗅.猎云 2.js闭包是什么? 3.for与foreach哪个更快? 4.php鸟哥是谁?能不能讲一下php执行原理? 5.php加速器有哪些?apc.z ...
- Jmeter(十)检查点
检查点又名断言,我们在手工测试过程中肉眼以及自己的逻辑思维对实际结果进行判断是否与预期结果一致,但是工具是死的,没有眼睛,没有思维,并不知道需要判断的信息在哪块,或者是来判断什么东西,我们需要让工具更 ...
- [UE4]更通用的接口,将UserWidget作为图标添加到小地图
将图标改成UserWidget添加到小地图,UserWidget支持动画特效,更丰富小地图的功能. 一.在小地图图标结构体中,将Flag数据类型改成UserWidget,删除ImageWidget(类 ...
- .net core批量注入实现类
1.获取实现类程序集方法 public class RuntimeHelper { //通过程序集的名称加载程序集 public static Assembly GetAssemblyByName(s ...
- sas 解析json
代码: proc ds2;data _null_; method init(); dcl package json j(); dcl int rc tokenType ...
- Ext.NET Combobox实现数据源静态配置
背景 项目中使用增值税税率, 需求原本是统一的指定税率, 譬如3% 5% 等固定的. 随着业务增加, 发现不同业务有不同的税率, 一会加一个, 一下要改很多个界面. 就想着放到统一的地方. 技术背景 ...
- Android之socket多线程(二)
使用ServerSocket创建服务器端: public static void main(String[] args) throws IOException { // TODO Auto-gener ...
- 用tmux工具给linux命令行分栏
介绍 有时候我们需要在命令行里同时开多个程序,但是每个程序都会占用命令行,这时候可以用tmux,给命令行界面分栏. 基本概念 tmux是分多层的 会话>窗口(我下文称作:页)>面板(或者叫 ...
- 1-scala基础
1.scala ①定义:Scala设计的初衷是要集成面向对象编程和函数式编程的各种特性.Scala运行于Java平台(Java虚拟机),并兼容现有的Java程序. ②特点:优雅.简洁.一行代码抵得上多 ...