用JavaScript获取图像数据网址？

2019-09-11 00:42:31 阅读：190 来源： 互联网

标签：javascript base64 firefox image greasemonkey

我有一个带有一些图像的常规HTML页面(只是常规< img /> HTML标记).我想得到他们的内容,优选base64编码,而不需要重新下载图像(即它已经被浏览器加载,所以现在我想要内容).

我很想用Greasemonkey和Firefox实现这一目标.

解决方法:

注意：这仅在图像来自与页面相同的域中,或者具有crossOrigin =“anonymous”属性且服务器支持CORS时才有效.它也不会给你原始文件,而是一个重新编码的版本.如果您需要的结果与原始结果相同,请参阅Kaiido’s answer.

您需要创建具有正确尺寸的canvas元素,并使用drawImage函数复制图像数据.然后,您可以使用toDataURL函数来获取数据：具有base-64编码图像的url.请注意,图像必须完全加载,否则您只需返回空(黑色,透明)图像.

这将是这样的.我从未编写过Greasemonkey脚本,因此您可能需要调整代码以在该环境中运行.

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

获取JPEG格式的图像不适用于Firefox的旧版本(大约3.5),因此如果您想支持它,则需要检查兼容性.如果不支持编码,则默认为“image / png”.

标签：javascript,base64,firefox,image,greasemonkey
来源： https://codeday.me/bug/20190910/1802494.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

用JavaScript获取图像数据网址？