把html页面转化成图片——html2canvas
所有样式要用px!
所有样式要用px!
所有样式要用px!
所有样式要用px!
用rem,会导致错位
<div id="win" class="i-d-fenxiang fenxiang1">
<img crossorigin="anonymous" class="i-d-fenxiang-pic" :src="fenxiang_pic" alt="">
<div class="i-d-fenxiang-box">
<div class="i-d-fenxiang-info">
<div class="i-d-fenxiang-info-name">
<i v-if="type==1" class="iconfont iconxiangqing-tm"></i>
<i v-if="type==0" class="iconfont iconxiangqing-tb"></i>
<i v-if="isbaoyou" class="iconfont iconxiangqing-baoyou"></i>
{{name}}
</div>
<div class="i-d-fenxiang-price">现价:<span>¥{{yuan_price}}</span></div>
<div class="i-d-fenxiang-quan">
<div class="i-d-fenxiang-quan-left">
<div>券</div>
<div>{{quan}}</div>
</div>
<div class="i-d-fenxiang-quan-right">
券后价:<span>¥{{xian_price}}</span>
</div>
</div>
</div>
<div class="i-d-fenxiang-right">
<div class="i-d-fenxiang-qrcord">
<div class="i-d-fenxiang-qrcord-pic" id="qrcode"></div>
</div>
<div class="i-d-fenxiang-qrcord-text">长按保存图片</div>
</div>
</div>
</div>
// 打开分享弹窗
openBanner: function () {
var that = this;
myApp.preloader.show();
that.isfenxiang = true;
$(".i-d-zhezhao").show();
// 绘制画布
var copyDom = document.querySelector('.fenxiang1');
var width = copyDom.offsetWidth;//dom宽
var height = copyDom.offsetHeight;//dom高
console.log(that.fenxiang_pic);
console.log(width);
console.log(height); var scale = 2;//放大倍数
html2canvas(copyDom, {
dpi: window.devicePixelRatio * 2,
scale: scale,
width: width,
heigth: height,
useCORS: true
}).then(function (canvas) {
var dataURL = canvas.toDataURL();
console.log(dataURL);
that.canvas = dataURL.split(',')[1];
$(".i-d-canvas").attr('src', dataURL);
myApp.preloader.hide(); api.addEventListener({
name: 'longpress'
}, function (ret, err) {
ac5.open();
});
});
},
把html页面转化成图片——html2canvas的更多相关文章
- hml页面转化成图片
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...
- html dom 转化成图片踩坑记(canvas toDataURL)
需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...
- 在linux环境下使用icepdf或pdfbox将pdf转化成图片是乱码解决
在linux环境下使用icepdf或pdfbox将pdf转化成图片是出现乱码,网上查发下是itextpdf生成pdf引用"STSong-Light"字体而linux环境下没有这个字 ...
- base64字符串转化成图片
package com.dhht.wechat.util; import sun.misc.BASE64Decoder;import sun.misc.BASE64Encoder; import ja ...
- 将jsp页面转化为图片或pdf升级版(一)(qq:1324981084)
java高级架构师全套vip教学视频,需要的加我qq1324981084 前面我利用httputil将jsp转化为html,之后转化为pdf,但我发现这样错误率比较高,且成功后有得图片没有完全形成.所 ...
- 将jsp页面转化为图片或pdf(一)
在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是itext所不识别的,所以努力了一段时间后就放弃了,后来发现htmlutil抓 ...
- H5页面转成图片并下载到本地
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 将jsp页面转化为图片或pdf(一)(qq:1324981084)
java高级架构师全套vip教学视频,需要的加我qq1324981084 在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是it ...
- 用JavaScript将Canvas内容转化成图片的方法
上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用.有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它.我们也想有100万美元 ...
随机推荐
- 关于EOF的使用的好文章
Linux shell脚本EOF妙用 https://blog.csdn.net/zongshi1992/article/details/71693045
- VUE温习:style层次分析
一.vue样式style层次分析 1.样式可以在main.js.模块js文件.组件style.组件script标签内,index.html文件内引入,不同位置引入的样式有什么关系. 2.总结: (1) ...
- 关于ProgressDialog.show抛出android.view.WindowManager$BadTokenException: Unable to add window
下午摆弄ProgressDialog,进入就抛错:android.view.WindowManager$BadTokenException: Unable to add window -- token ...
- 解决Maven项目总是回跳到jdk1.5的情况的方法
一.在pom.xml中加入: <build> <plugins> <plugin> <groupId>org.apache.maven.plugins& ...
- 【Python】解析Python的缩进规则
Python中的缩进(Indentation)决定了代码的作用域范围.这一点和传统的c/c++有很大的不同(传统的c/c++使用花括号花括号{}符决定作用域的范围:python使用缩进空格来表示作用域 ...
- Android 读写权限,已经授权情况下,仍然(Permission denied)
首次安装APP,获取读写权限以后, 当读取文件时候,仍然会遇见(Permission denied)错误,解决方案是杀掉APP,重新打开APP即可. 应该属于部分版本系统的bug,直到APP所有的pr ...
- Java密码体系结构简介:Java Cryptography Architecture (JCA) Reference Guide
来自Java官方的文档,作备忘使用. 简介: Java平台非常强调安全性,包括语言安全,密码学,公钥基础设施,认证,安全通信和访问控制. JCA是平台的一个主要部分,包含一个“提供者”体系结构和一组用 ...
- Bizatlk Accelerator for RosettaNet安装与配置
以下安装步骤是基于动手实验的BizTalk开发环境(<BizTalk动手实验(一)安装BizTalk Server 2010开发环境> )进行安装. 安装准备 运行账户配置 新建IIS_W ...
- Fortran一个获取硬件系统信息的函数库
此函数库提供了 Visual Fortran 上获取硬盘ID,CPU编号,windows安装时间及文件头部校验的四个函数.可用于简单的程序加密.(但切勿用于商业性很强的地方) ...
- TCP 协议简析
TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的.可靠的.基于字节流的通信协议,数据在传输前要建立连接,传输完毕后还要断开连接.它是个超级麻烦的协议, ...