如何在画布中打开图像?这是编码的
我正在使用
var strDataURI = oCanvas.toDataURL();
Run Code Online (Sandbox Code Playgroud)
输出是编码的基础64图像.如何在画布上绘制此图像?
我想使用strDataURI 和创建图像?它是poosible?
如果不是那么可能是什么可能是在画布上加载图像的解决方案?
给定一个带有图像的现有浏览器页面,有没有办法使用 Javascript 从元素中获取字节<img>?
我没有看到任何HTMLImageElement允许从图像元素获取字节数组的方法。
我尝试了以下方法,但这返回一个空字节数组。
var img = document.querySelector('.my_image');
var body = document.querySelector('body');
var canvas = document.createElement('canvas');
canvas.height = img.height;
canvas.width = img.width;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
body.appendChild(canvas);
var imageBytes = context.getImageData(img.width, img.height, 1, 1).data;
console.log(imageBytes);
Run Code Online (Sandbox Code Playgroud) 我正在尝试将图像(链接)转换为 base64 以便能够存储在浏览器端(IndexedDB)中,但我无法做到这一点,我几天来一直在寻找解决方案,但我没有我的问题的解决方案。
在这个很棒的代码中,我能够将图像从 Internet 转换为 Base64,但问题是由于同源策略,我无法对 Internet 上的其他图像执行此操作。
我将如何避免该问题,或者如果您知道将图像转换为 Base64 的任何其他解决方案,那将非常有帮助
function convertImgToBase64URL(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
convertImgToBase64URL('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png', function(base64Img){
alert('it works');
$('.output').find('img').attr('src', base64Img);
});Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"> <img> </div>Run Code Online (Sandbox Code Playgroud)