1，带滚动条的绘制（PC端）
需求如下：
需求.png
效果图：
效果.png
实现方式及注意事项：
- 使用的是 html2canvas 1.0.0-rc.1 版本
- html页面结构说明
- div.export-canvas 是定高、带滚动条的容器
- prepareRef 是绘制区域
- 背景图、图片均放在了项目里面（如果是网络图片，需要转换为base64）
- “导出预习表扬榜”是一个a标签，herf=绘制结束之后的图片地址
- 注意：
虚线绘制后是实线，对这个功能来说影响不大
html结构.png
点击“生成图片"对应的方法：
makeCanvasFun(ref){
let that = this;
//rc.1版本不需要设置width/windowWidth等属性,不然发布到线上 图片空白
html2canvas(that.$refs[ref],{
async: true,
backgroundColor: null,
scale:2
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
let tmpBlob = that.base64ToBlob(dataURL); //[object blob]
that.prepareUrl = window.URL.createObjectURL(tmpBlob);//base64转换为blob格式的图片，便于 a 标签的 download
}).catch((e) => {
console.log('canvas catch e.message',e.message)
console.log(e);
});
},
2，兼容ios13.6+（微信h5页面）
需求效果如下：
- 选择图片，并可以旋转、缩放上传的图片
- 用户头像、变化的二维码
-
手机端生成海报图
需求.png
效果.png
实现方式：
- html2canvas 版本号 1.0.0-rc.5 ，引用js及解决方案
- 上传的图片file转换为base64
- 图片的移动和缩放使用的是
AlloyFinger - 背景图使用的项目里的图片，网络图片要是同域图片然后转换为base64
- 头像和二维码图片 均是同域图片
- html及部分js
<div class="poster-body">
<!--createRef 为绘制区域-->
<div class="poster-create" ref="createRef">
<div class="pinch-box">
<!--用户上传的图片容器-->
<img :src="imgUploadSrc" alt="" class="pinch-img"
id="pinchImg" >
</div>
<div class="poster-company">
<!--海报固有的图片、二维码、用户信息等-->
<!--<div class="nick">学生名chin(*^▽^*)</div>-->
<img :src="userHead" alt="" id="j_user_header" class="avatar">
<img :src="imgQrcode" alt="" id="j_user_code" class="qrcode">
<img :src="posterBg" alt="" class="poster-bg">
</div>
</div>
</div>
// input[type=file]的change事件 -- 选择图片之后
changeFileFunc(ele){
let that = this;
let file = document.getElementById(ele).files[0]
if(file){
that.changeFileToBaseURL(file,function (base) {
that.imgUploadSrc = base;
}); //上传的图片的base64url
}else{
console.log('未选择图片')
}
},
//将file文件转换为base64
changeFileToBaseURL(file,callback){
let fileReader = new FileReader();
if(file){
fileReader.readAsDataURL(file);
fileReader.onload = function (e) {
let imgBase64Data = e.target.result; //也可以使用this.result,因为this 指向了 e.target
callback(imgBase64Data);
}
}else{
return null
}
},
//将网络图片 转换为base64,纯js,不依赖jquery, imgUrl必须是同域
changeOnlineImgToBaseUrl(imgUrl,callback){
window.URL = window.URL || window.webkitURL;
let xhr = new XMLHttpRequest()
xhr.open("get",imgUrl,true);
xhr.responseType = "blob"; //使用blob对象
xhr.onload = function () {
if(this.status ==200){
var blob = this.response;
let fileReader = new FileReader();
fileReader.readAsDataURL(blob);
fileReader.onload = function (e) {
let imgBase64Data = e.target.result;
callback(imgBase64Data);
}
}else{
console.log('xhr status 不是200 , ',this.status)
}
}
xhr.send();
},
//生成海报按钮
createPosterFun(){
let that = this;
(window.html2canvas || html2canvas)(that.$refs.createRef,{
useCORS:true,
allowTaint:true,
backgroundColor: null,
scale:3
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
that.finalUrl = dataURL; //最终显示的图片地址，微信中长按即可存储
}).catch((e) => {
console.log('canvas catch e.message',e.message)
console.log(e);
});
}
参考文档
| 名称 | 默认 | 描述 |
|---|---|---|
| async | true | 是否异步解析和呈现元素 |
| allowTaint | false | 是否允许跨原始图像污染画布 |
| backgroundColor | #ffffff | 画布背景颜色，如果在DOM中未指定。设置 null 为透明 |
| canvas | null | canvas 用作绘图基础的现有 元素 |
| foreignObjectRendering | false | 是否在浏览器支持的情况下使用ForeignObject渲染 |
| imageTimeout | 15000 | 加载图像的超时（以毫秒为单位）。设置 0 为禁用超时。 |
| ignoreElements | (element) => false | 谓词函数，用于从渲染中删除匹配元素。 |
| logging | true | 启用日志记录以进行调试 |
| onclone | null | 在克隆文档进行渲染时调用的回调函数可用于修改将在不影响原始源文档的情况下呈现的内容。 |
| proxy | null | Url到 代理 ，用于加载跨源图像。如果留空，则不会加载跨原始图像。 |
| removeContainer | true | 是否要清理克隆的DOM元素html2canvas会暂时创建 |
| scale | window.devicePixelRatio | 用于渲染的比例。默认为浏览器设备像素比率。 |
| useCORS | false | 是否尝试使用CORS从服务器加载图像 |
| width | Element width | canvas的宽度 |
| height | Element height | canvas的高度 |
| X | Element x-offset | 裁剪画布x坐标 |
| Y | Element y-offset | 裁剪画布y坐标 |
| scrollX | Element scrollX | 渲染元素时使用的x滚动位置（例如，如果Element使用 position: fixed ） |
| scrollY | Element scrollY | 渲染元素时使用的y滚动位置（例如，如果Element使用 position: fixed ） |
| windowWidth | Window.innerWidth | 渲染时使用的窗口宽度 Element ，可能会影响媒体查询等内容 |
| windowHeight | Window.innerHeight | 渲染时使用的窗口高度 Element ，这可能会影响媒体查询等内容 |
网友评论