把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万美元 ...
随机推荐
- Pipenv和Python虚拟环境
Pipenv & 虚拟环境 本教程将引导您完成安装和使用 Python 包. 它将向您展示如何安装和使用必要的工具,并就最佳做法做出强烈推荐.请记住, Python 用于许多不同的目的.准确地 ...
- 微信小程序生成海报分享:canvas绘制文字溢出如何换行
主要思路: 1.先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串 2.计算另起的 ...
- update使用inner join
一.update 基础语法 UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 上面是我们常见的更新表的方式,其实我们还可以去另外一张表的数据来更新当前的表数据,如现在就有这 ...
- shell编程学习笔记(六):cat命令的使用
这一篇不是讲shell编程的,专门讲cat命令.shell编程书用到了这个cat命令,顺便说一下cat命令. cat命令有多种用法,我一一来列举(以下蓝色字体部分为Linux命令,红色字体的内容为输出 ...
- ionic 锁定方向 禁止横屏 orientation
安装插件 cordova-plugin-screen-orientation ionic cordova plugin add cordova-plugin-screen-orientation 添加 ...
- mysql数据库全备和全备还原(使用Xtrabackup)
一.使用innobackupex创建全备 语法 innobackupex --user=DBUSER --password=DBUSERPASS /path/to/backup/dir/ innoba ...
- 【MVP时间】5节课助你破解物联网硬件接入难点
视频播放链接:https://mvp.aliyun.com/topic/10?spm=5176.8961170.detail.18.31a3yK4zyK4zUc 1.会上网的鸡,有啥不一样? http ...
- iframe之间操作记录
1.watch.js (function ($) { $.fn.watch = function (callback) { return this.each(function () { //缓存以前的 ...
- Docker入门实践
Docker是一门很成熟的容器技术,类似虚拟机技术主要用做环境的隔离,方便环境的复制镜像,虚拟机是基于操作系统这一层的,而Docker更加的轻量级,像是“应用”层级的.比如我需要一个MySQL环境.一 ...
- Python之Simple FTP (一)
一.引言: 好久之前想写一个ftpserver的小daemon,但是一直拖着就没有写,这回正好处于放假的时候可以有时间来写写. 二.FTP需求功能: 1.用户认证系统 2.文件上传和下载功能 a.支持 ...