我的页面生成如下URL:"blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"如何将其转换为普通地址？
我使用它作为一个<img>的src属性.
我需要在Javascript中将dataURL转换为File对象,以便使用AJAX将其发送出去.可能吗？如果是,请告诉我如何.
我目前正在研究一个显示由C++服务器发送的图像的WebSocket应用程序.我在那里看到了几个主题,但我似乎无法在Firefox中摆脱这个错误:
图像损坏或截断:data:image/png; base64,[some data]
这是我用来显示我的blob的Javascript代码:
socket.onmessage = function(msg) {
var blob = msg.data;
var reader = new FileReader();
reader.onloadend = function() {
var string = reader.result;
var buffer = Base64.encode(string);
var data = "data:image/png;base64,"+buffer;
var image = document.getElementById('image');
image.src = data;
};
reader.readAsBinaryString(blob);
}
我正在使用我在这个主题上找到的红点图片:https://stackoverflow.com/a/4478878/1464608 而Base64类来自这里:https://stackoverflow.com/a/246813/ 1464608
但我获得的base64结果不匹配,Firefox检索到图像被损坏的错误.
我知道这不是很多信息,但我不知道在哪里看:/任何帮助都非常受欢迎!
我想使用fabric.js将Canvas下载为PNG.在下载时我想缩放图像.所以我使用multiplier了toDataURL()函数的属性.但我得到了失败 - 网络错误
PS:如果我不给multiplier属性,它正在下载,但我确实想要使用multiplier属性,因为我必须缩放图像
这就是我在做的事情:
HTML代码:
<canvas width="400" height="500" id="canvas" ></canvas>
<a id='downloadPreview' href="javascript:void(0)"> Download Image </a>
JS
document.getElementById("downloadPreview").addEventListener('click', downloadCanvas, false);
var _canvasObject = new fabric.Canvas('canvas');
var downloadCanvas = function(){
var link = document.createElement("a");
link.href = _canvasObject.toDataURL({format: 'png', multiplier: 4});
link.download = "helloWorld.png";
link.click();
}
我正在做以下：
blob:带有new Blob和的URL 中createObjectURLfabric.Image使用它从它创建一个对象fromURLfromURL回调中，调用canvas.add将新添加Image到画布这是我的代码：
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height = "200"><foreignObject width="100%" height="100%"><text xmlns = "http://www.w3.org/1999/xhtml" style = "font-size: 40px; color: #FFFFFF">Example</text></foreignObject></svg>';
var svgBlob = new Blob([svg], {type: 'image/svg+xml'});
var svgURL = window.URL.createObjectURL(svgBlob);
fabric.Image.fromURL(svgURL,function(oIMG) {
oIMG.crossOrigin = 'Anonymous';
canvas.add(oIMG);
});
然后我试试 getImageData:
var dataImage = context.getImageData(0,0,canvas.width,canvas.height).data;
在 Chrome 中，这给了我错误：
未捕获的 DOMException：无法在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨域数据污染。
这很奇怪，因为我从不使用任何跨域 URL，只使用blob:URL。
在 Firefox 中，它完美运行。该问题似乎是 Chrome …
我是 HTML5 中画布的新学习者，目前正在尝试为孩子们制作一个简单的画线项目。我将背景图像插入画布中，并尝试提出一种徒手画线的方法，但没有结果。有人可以帮我修复下面的代码吗？之前谢谢大家。
<!DOCTYPE HTML>
<html>
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', …我正在按照教程（https://svelte.dev/tutorial/dynamic-attributes）导入本地图像文件。但这没有用。在应用程序中找不到该图像。
我需要在哪里找到这些图像以使其像本教程中那样工作？
let src = './images/background.jpg'
.
.
.
<img {src} alt="background image" />
浏览器显示“找不到图像”。
javascript ×6
blob ×2
canvas ×2
fabricjs ×2
html ×2
fileapi ×1
filereader ×1
html5 ×1
html5-canvas ×1
jquery ×1
svelte ×1
url ×1
websocket ×1