所有样式要用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. SPI协议详解

    原帖地址:https://blog.csdn.net/weiqifa0/article/details/82765892

  2. 推荐一个好工具:P/Invoke Interop Assistant【转】

    原文地址 :http://write.blog.csdn.net/postedit 在从托管代码里面调用非托管代码的时候,经常会翻阅MSDN找到需要调用的这个程序集里面的关于需要调用方法的签名,还要特 ...

  3. 如何确定Isilon cluster的网卡类型是40GbE的还是10GbE的

    可以使用isi upgrade cluster firmware devices命令. 从命令行输出可以看到,当前的cluster使用的是40G的前端网卡. 如果是10G网卡,输出结果应当是如下的样子 ...

  4. CDH下集成spark2.2.0与kafka(四十一):在spark+kafka流处理程序中抛出错误java.lang.NoSuchMethodError: org.apache.kafka.clients.consumer.KafkaConsumer.subscribe(Ljava/util/Collection;)V

    错误信息 19/01/15 19:36:40 WARN consumer.ConsumerConfig: The configuration max.poll.records = 1 was supp ...

  5. 【技能意志矩阵-skill will matrix】工作中究竟是个人能力更重要,还是我们的积极性更能提高我们的业绩?

    工作中究竟是个人能力更重要,还是我们的积极性更能提高我们的业绩? 我们可以通过建立“个人能力(即技能)”和“积极性(即意志)”的矩阵(skill will matrix),找到自己的象限,并根据指导意 ...

  6. Convert ResultSet to JSON and XML

    public static JSONArray convertToJSON(ResultSet resultSet) throws Exception { JSONArray jsonArray = ...

  7. ionic1页面切换动画卡顿优化

    https://github.com/shprink/ionic-native-transitions https://www.npmjs.com/package/ionic-native-trans ...

  8. Deep Learning.ai学习笔记_第四门课_卷积神经网络

    目录 第一周 卷积神经网络基础 第二周 深度卷积网络:实例探究 第三周 目标检测 第四周 特殊应用:人脸识别和神经风格转换 第一周 卷积神经网络基础 垂直边缘检测器,通过卷积计算,可以把多维矩阵进行降 ...

  9. 先从一个 libev 的 demo 入手

    最近想研究下 libev 这个网络库,所以先从官方文档一个最简单的 demo 开始,代码如下: //io.c // a single header file is required #include ...

  10. Windows Server 2008 IIS安装FTP及端口配置

    添加角色IIS,选择上FTP服务 打开IIS,右击网站,添加FTP站点 允许访问的指定用户,必须是Windows系统真实存在的用户,为了安全起见,此用户只赋予user组即可,不能赋予远程桌面权限 如果 ...