所有样式要用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的更多相关文章

  1. hml页面转化成图片

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  2. html dom 转化成图片踩坑记(canvas toDataURL)

    需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...

  3. 在linux环境下使用icepdf或pdfbox将pdf转化成图片是乱码解决

    在linux环境下使用icepdf或pdfbox将pdf转化成图片是出现乱码,网上查发下是itextpdf生成pdf引用"STSong-Light"字体而linux环境下没有这个字 ...

  4. base64字符串转化成图片

    package com.dhht.wechat.util; import sun.misc.BASE64Decoder;import sun.misc.BASE64Encoder; import ja ...

  5. 将jsp页面转化为图片或pdf升级版(一)(qq:1324981084)

    java高级架构师全套vip教学视频,需要的加我qq1324981084 前面我利用httputil将jsp转化为html,之后转化为pdf,但我发现这样错误率比较高,且成功后有得图片没有完全形成.所 ...

  6. 将jsp页面转化为图片或pdf(一)

    在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是itext所不识别的,所以努力了一段时间后就放弃了,后来发现htmlutil抓 ...

  7. H5页面转成图片并下载到本地

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 将jsp页面转化为图片或pdf(一)(qq:1324981084)

    java高级架构师全套vip教学视频,需要的加我qq1324981084 在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是it ...

  9. 用JavaScript将Canvas内容转化成图片的方法

    上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用.有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它.我们也想有100万美元 ...

随机推荐

  1. 用SublimeText当Unity Shader的编辑器

    用Visual Studio写shader实在蛋疼,那可能就会有人要问了,为啥不用插件可视化制作shader呢?因为我是新手,新手还是老老实实敲代码,慢慢来- 所以试着在网上找找,有没有类似的插件或者 ...

  2. HTML动画 request animation frame

    在网页中,实现动画无外乎两种方式.1. CSS3 方式,也就是利用浏览器对CSS3 的原生支持实现动画:2. 脚本方式,通过间隔一段时间用JavaScript 来修改页面元素样式来实现动画.接下来我们 ...

  3. ionic android升级检查

    https://www.cnblogs.com/zxj159/p/4421578.html 坑: 放到cordova.file.DataDirectory下载异常? 只好cordova.file.ex ...

  4. 【Linux】常见公共DNS地址

    如果您是程序员.系统管理员或任何类型的 IT 工作者,那么您可能有自己最喜欢的用于故障排除的 IP 地址.而且你可能已经用了好几年了. 这些 ip 可用于: ping 测试连接 使用 dig 或 ns ...

  5. 使用h2数据库

    h2数据库提供了一个简单的web管理界面 import org.h2.tools.Server; import org.slf4j.Logger; import org.slf4j.LoggerFac ...

  6. 关于dede后台登陆后一片空白以及去除版权

    今天家里的电脑上新装DEDE5.7后台登陆后竟然一片空白,装PHPCMS却没有问题.百度了好久,也没找到一个像样的答案,晕死! 看了源码后发现在源码里的类库中很多都是PHP4的语法,var这个函数在P ...

  7. Spring Framework 5.x 学习专栏

    Spring Framework 5.0 入门篇 Spring构建REST Web Service 消费一个RESTful Web Service 事务管理 Spring使用JDBC访问关系数据 任务 ...

  8. Atitti 互联网时代三大竞争战略 ——平台化战略 锚”战略、价值领先战略

    Atitti 互联网时代三大竞争战略 ——平台化战略 锚”战略.价值领先战略 美国著名管理学家迈克尔•波特在<竞争战略>一书中提出了集中化战略和差异化战略.成本领先战略三种基本竞争战略,从 ...

  9. vue 实站技巧总结

    多个页面都使用的到方法,放在 vue.prototype上会很方便 刚接触 vue的时候做过一件傻事,因为封装了一个异步请求接口post,放在 post.js文件里面,然后在每个需要使用异步请求的页面 ...

  10. SQL2008R2的 遍历所有表更新统计信息 和 索引重建

    [2.以下是更新统计信息] DECLARE UpdateStatisticsTables CURSOR READ_ONLY FOR SELECT sst.name, Schema_name(sst.s ...