我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
先看效果
实现思路
-
通过canvas的
toDataURL将canvas转换成图片base64 -
toDataURL的第一个参数可以规定生成的哪种图片的base64 -
第二个参数为生成的图片质量，
0~1之间即可- 0质量最差
- 1是完整的质量
- 根据不同质量生成的base64大小差距极大
-
然后是canvas的绘制
-
这个没什么特别要求，哪怕是空白的canvas也可以转换成图片base64
-
我这里是画了一个圆和一个正方形，边缘这是通过css来控制的
-
为了对比不同质量的图片，通过循环生成了从0到1的十张图片
-
然后生成了黑背景与白背景图片方便对比观看
具体实现
html实现
<body>
<h2>Canvas</h2>
<canvas id="c" width="100"></canvas>
</body>
初始化一个canvas用来绘制图案
静态css
canvas { border: 1px solid green; }
img { border: 1px solid blue }
给canvas跟生成的img画上边缘
生成不同质量的图片
生成函数
function test(label) {
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.arc(50,50,30.5,0,Math.PI*2,true);
ctx.stroke();
ctx.lineWidth = 2;
ctx.strokeRect(40.5,40.5,20,20);
document.write('<h2>' + label + '</h2>');
for (var i = 0; i < 1; i += 0.1) {
document.write('<p>');
document.write('<span>Quality: <b>' + i.toFixed(1) + '</b></span>');
document.write('<img src="' + canvasEl.toDataURL('image/jpeg', i) + '">');
document.write('</p>');
}
}
生成黑背景图片与白背景图片
// no background
test('toDataURL("image/jpeg", …), no background');
ctx.fillStyle = 'white';
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
// white background
test('toDataURL("image/jpeg", …), white background');
完整代码
掘金代码块不生效，可以复制到本地查看效果哦~
总结
- 主要是canvas的
toDataURL的使用
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
热爱开源，支持开源，拥抱开源！
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐
