python html转图片失真_html dom 转化成图片踩坑记(canvas toDataURL)
需求
在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存。
面向百度搜索第三方得 html2canvas 和 dom-to-image
两者在写这篇笔记之前在github上的星星数分别是
dom-to-image 4k ⭐️
html2canvas 13.7k ⭐️
两者都有尝试过,都有意想不到的bug,包括
部分手机有某些背景图片无法展示,为空白
iphone8 plus ios 11中根本不调用这个转换方法,从而得不到想要的图片。
等等
自己动手
思路
利用canvas的toDataURL来拿到canvas转化的base64码,来替换img的url, 也可以把图片上传到公司的服务器上,得到图片的地址来进行下载,或作为参数来传递
那么canvas的绘制主要就是文本和图片的绘制,文本绘制相对简单,图片绘制有一些注意点。
canvas 初始化
由于最后生成的图片可能会模糊,可以尽量画大一点画布,可以按照设计图来
你的浏览器居然不支持Canvas?!赶快换一个吧!!
let c = document.getElementById("canvas");
let ctx = c.getContext("2d");
文本绘制
官方文档如图
代码示例
ctx.fillStyle = "#fff";
ctx.font = "32px PingFangSC-Regular";
ctx.textAlign = "left";
ctx.fillText("这是一些文字", 280, 755);
图片绘制
官方文档如图
注意事项
图片需要进行跨域处理,否则后期无法生成图片,也就是在img标签中增加crossOrigin属性,值为anonymous
const instBanner = document.getElementById("instBanner");
instBanner.crossOrigin = "anonymous";
需要等到图片加载完成再画到画布上,否则有可能没画上去
const posterBg = new Image();
posterBg.src = mainBg;
posterBg.onload = () => {
ctx.drawImage(posterBg, 0, 0, 750, 1164);
}
完整代码示例
const posterBg = new Image();
posterBg.src = 'https:....'; //这里是图片url
posterBg.crossOrigin = "anonymous";
posterBg.onload = () => {
ctx.drawImage(posterBg, 0, 0, 750, 1164);
}
生成图片
替换img src
let dataURL = c.toDataURL("image/png");
let canvasImg = document.getElementById("canvasImg");
canvas.src = dataURL;
上传服务器,得到img url(可作为参数,保存图片)
let dataURL = c.toDataURL("image/png");
function getImgUrl(dataURL){
//一些上传服务器的代码
return imgUrl
}
let imgUrl = getImgUrl();
let canvasImg = document.getElementById("canvasImg");
canvas.src = imgUrl;
最后奉上一些,常用的canvas处理方法
圆形图片的绘制
ctx.save();
ctx.beginPath(); //开始绘制
//先画个圆 前两个参数确定了圆心 (x,y) 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针
ctx.arc(60, 60, 30, 0 * Math.PI, 2 * Math.PI);
ctx.clip();//画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
ctx.drawImage('https:....', 30, 30, 60, 60);
contex.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
圆角矩形绘制
/**该方法用来绘制圆角矩形
*@param cxt:canvas的上下文环境
*@param x:左上角x轴坐标
*@param y:左上角y轴坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param radius:圆的半径
*@param lineWidth:线条粗细
*@param strokeColor:线条颜色
**/
function strokeRoundRect(cxt,x,y,width,height,radius,/*optional*/lineWidth,/*optional*/strokeColor){
//圆的直径必然要小于矩形的宽高
if(2*radius>width || 2*radius>height){return false;}
cxt.save();
cxt.translate(x,y);
//绘制圆角矩形的各个边
drawRoundRectPath(cxt,width,height,radius);
cxt.lineWidth = lineWidth||2;//若是给定了值就用给定的值否则给予默认值2
cxt.strokeStyle=strokeColor||"#000";
cxt.stroke();
cxt.restore();
}
/**该方法用来绘制一个有填充色的圆角矩形
*@param cxt:canvas的上下文环境
*@param x:左上角x轴坐标
*@param y:左上角y轴坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param radius:圆的半径
*@param fillColor:填充颜色
**/
function fillRoundRect(cxt,x,y,width,height,radius,/*optional*/fillColor){
//圆的直径必然要小于矩形的宽高
if(2*radius>width || 2*radius>height){return false;}
cxt.save();
cxt.translate(x,y);
//绘制圆角矩形的各个边
drawRoundRectPath(cxt,width,height,radius);
cxt.fillStyle=fillColor||"#000";//若是给定了值就用给定的值否则给予默认值
cxt.fill();
cxt.restore();
}
function drawRoundRectPath(cxt,width,height,radius){
cxt.beginPath(0);
//从右下角顺时针绘制,弧度从0到1/2PI
cxt.arc(width-radius,height-radius,radius,0,Math.PI/2);
//矩形下边线
cxt.lineTo(radius,height);
//左下角圆弧,弧度从1/2PI到PI
cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI);
//矩形左边线
cxt.lineTo(0,radius);
//左上角圆弧,弧度从PI到3/2PI
cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
//上边线
cxt.lineTo(width-radius,0);
//右上角圆弧
cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);
//右边线
cxt.lineTo(width,height-radius);
cxt.closePath();
}
python html转图片失真_html dom 转化成图片踩坑记(canvas toDataURL)相关推荐
- pdf怎么转图片?pdf文件转化成图片的步骤
在工作当中大家经常会使用到pdf文档,虽然pdf文档非常利于传输,但是因为其不可编辑的特性,如果需要编辑.修改其中的内容的时候就非常麻烦了.今天来给大家分享一款在线pdf转图片工具,不仅不需要下载,同 ...
- python 脚本将视频转化成图片 | python scripts to convert video to pictures
python 脚本将视频转化成图片 | python scripts to convert video to pictures python video_to_images.py 运行时,修改输入.输 ...
- iOS 文字转化成图片
//文字转化成图片 -(UIImage *)imageFromText:(NSArray*)arrContent withFont:(CGFloat)fontSize withTextColor:(U ...
- php网址图片怎么转based4,Ionic4 Base64 转化成图片插件-Base64 转化成图片Base64 To Gallery - Ionic Native...
This plugin allows you to save base64 data as a png image into the device Ionic Base64 转化成图片Base64 T ...
- base64字符串转化成图片
/*** base64字符串转化成图片** @param base64* @return*/ public static File base64ToFile(String base64) throws ...
- base64编码转换android,Android将base64编码转化成图片
类似base64流的图片解析并展示: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBw ...
- python将视频按帧读取并转换成图片
python将视频按帧读取并转换成图片 代码如下 from glob import glob import cv2 import tqdm import os video_path = glob(r' ...
- 手写画板实现并转化成图片
手写画板实现并转化成图片 <!DOCTYPE html> <html> <head> <title>画板实验</title><meta ...
- view转化成图片并保存图片到相册
view转换成图片(下面的view转化成你的整体布局) // 把一个View转换成图片view.setDrawingCacheEnabled(true);view.setDrawingCacheQua ...
最新文章
- golang基于UDP完成
- 高并发项目Java是标配?.NET Core要将它拉下“神坛”!
- Siebel Admin: How to find the Component that associated with Application
- java 试卷自动生成_基于JAVA的试题自动生成系统 - WEB源码|JSP源码/Java|源代码 - 源码中国...
- POJ 1398 Complete the sequence! ★ (差分)
- webservice测试工具
- smarq v7 智器 v7 新手使用
- 12V转5V原理图(LM2596)
- 用量子物理学原理解释为什么振金可以吸收能量(论发散思维的重要性)
- HowTo 激活非常规方式安装的正版OEM Vista
- Vue 拖拽缩放组件 vue-drag-resize属性
- win10使用无边框鼠标 (mouse without border)-局域网共享鼠标键盘
- VSCode设置代码格式化
- Navigation测试常用网址导航工具
- 财会法规与职业道德【7】
- 天地在我心 2010-11-12
- IDEA创建ZK框架入门Hello word
- 电子电路设计——三人抢答电路(D触发器版)
- 基于matlab的数字信号发生器及简易电子琴设计,简易电子琴电路的设计仿真与实现课程设计...
- HTML创建12列小屏幕网格,Bootstrap 网格系统(Grid System)
热门文章
- 惠普服务器G8系列做raid,hp g8服务器设置raid5
- 大数据可视化方法有哪些
- MySQL学习之路(一):Windows平台下MySQL安装、启动、连接
- linux安装python_如何在 Windows 上安装 Python | Linux 中国
- C语言字符串类型转换为整型,c语言中将一个字符串转换到整型数据类型的函数是什么?...
- python内存分配失败_关于python:如何避免[Errno 12]无法分配使用子进程模块导致的内存错误...
- android 发送按键 0,android monitor tool (8.0 模拟发送按键及触摸屏事件实现)
- C语言中变量名加括号,为什么在声明变量时C ++允许我们在括号内将变量名括起来?...
- python代码解读器_python文章生成器(附源码+讲解)
- Spark用DSL表达式如何使用row_number函数