700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html生成真正的空图片代码 用canvas和script生成无实质性的空白图像 比图像透明处理

html生成真正的空图片代码 用canvas和script生成无实质性的空白图像 比图像透明处理

时间:2024-07-16 04:30:46

相关推荐

html生成真正的空图片代码 用canvas和script生成无实质性的空白图像 比图像透明处理

我看到有些朋友还在用PS等图片处理软件编辑纯色图片变透明的操作,实质上图像透明化,并非真正意义上的图片看不到了,只是图片透明化了而已,如果处理不当,还是可以看到图片细微的颜色的。有没有真正意义上的空白图像呢?学习过html网页编程的朋友都知道,只需一段简单的html代码,就可以实现用canvas和script生成并无实质图像信息的空图,具体怎么操作呢?

首先,打开记事本(或电脑桌面右键新建一个文本文档打开)然后把下面的代码复制进去,然后点另存为,选择保存类型为所有文件,随便取个名字,后缀要加上.html比如(空白头像生成器.html)这样就可以了,然后保存到桌面,然后双击打开,会提示让下载一个名字为【空图.png】的图片,将此图下载到桌面上,打开看一下,你就会看到一个黑色或白色的空白透明的图片了,实际上它是没有颜色的,只是系统为了显示而已,看一下这个图片的大小才8KB,纯代码组成的框架,是不是你想要的空白图像呢?下面是空图生成html代码:

<html><canvas width="500" height="500" id="canvas"><canvas><script>var type = 'png';var imgData = canvas.toDataURL(type);var saveFile = function(data, filename){var save_link = document.createElementNS('/1999/xhtml', 'a');save_link.href = data;save_link.download = filename;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);};var filename = '空图.' + type;saveFile(imgData,filename);</script></html>

下面这个空白图片是上述代码生成的,也可以直接下载使用:

这面是一个像素为500x500的空图,如果你需要其他尺寸,就更改里面的width="500" height="500"为你想要的尺寸即可,如果不想要png格式,你还可以改成如jpg格式的,更改第二行的png为jpg保存即可。

喜欢这篇文章的粉丝朋友请给我点个赞吧,谢谢了!以后我会发布更多有趣的信息奉献给关注我的朋友,一定要关注我哟!

html生成真正的空图片代码 用canvas和script生成无实质性的空白图像 比图像透明处理还要牛 那种空白透明头像就是这么做出来的

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。