toDataURL();不保存图像
toDataURL(); not saving image?
我的toDataURL();
方法有问题。我正在尝试保存画布的图像,这样当我调整浏览器/画布的大小时,它可以再次出现在画布的背面(作为一种变通方法,因为无论何时设置画布的宽度,它都会将其清除),然后在不同大小的画布上继续我写的"绘制"功能。这样,看起来我可以无缝地调整画布的大小,而无需清除它。
在我的代码中,toDataURL();
似乎没有保存图像,或者在调整画布大小时我可能说错了。我检查了一下,只是把源文件设置为一个普通的.png文件,它似乎在后面画得很好。我发现以前问过这个问题,但我找不到一个满意的答案。。。
JS
canvas.onmousemove = draw;
var ctx = canvas.getContext('2d');
var video = document.createElement("video");
video.setAttribute("src", "some_video.mp4");
video.autoplay = true;
var img2 = new Image;
img2.src = "some_image.png";
var dataURL = canvas.toDataURL();
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
function draw(e){
var rect = canvas.getBoundingClientRect();
var x = e.clientX-rect.left-img2.width/2;
var y = e.clientY-rect.top-img2.height/2;
ctx.drawImage(video, x, y, 830, 644);
ctx.drawImage(img2, x, y, img2.width, img2.height);
}
$(window).resize(function(){
var image = new Image;
image.src = dataURL;
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.drawImage(image, 0, 0);
draw();
});
我不确定您打算如何处理剪切的内容,因为如果缩小大小,您的代码将转储新画布分辨率下方和右侧的所有像素。所以我认为你还没有想清楚。
你需要做的是让画布远离屏幕,设置为你想要的分辨率。然后将显示画布用作渲染到的视图和鼠标输入的事件目标,并在屏幕外画布上绘制所有函数。这样你就可以调整你想要的所有大小,而不必使用toDataURL(这不是那种类型的用途,因为调整大小事件可以在一秒钟内触发多次,toDataURL编码和解码将无法跟上)
创建屏幕外画布
var can = document.createElement("canvas");
can.width = width;
can.height = height;
ctx = can.getContext("2d");
每当更新屏幕外画布或调整窗口大小时,都会将其渲染到屏幕上画布。
scrCtx.drawImage(can,0,0); //scrCtx is the on screen ctx
您还可以在不影响背景图像质量的情况下缩放、平移和旋转视图,从而获得额外的好处。它很快。toDataURL旨在通过网络和存储设备进行数据传输,而不是作为ram缓冲区。
相关文章:
- 有没有一个javascript库能够修改和保存图像
- 如何使用html / angularjs保存图像文件
- 上传图像,重新定位,保存图像
- 使用JavaScript在分析中保存图像
- 从图像URL javascript html保存图像文件
- 从画布保存图像时缺少扩展名
- 如何用我在HTML5画布上绘制的src保存图像文件
- 使用 canvas.toDataURL() 解码和保存图像
- 如何旋转图像并保存图像
- 在 Javascript 中保存图像
- jQuery 保存图像点击
- 保存图像 src 的功能不起作用
- 禁用移动设备中的默认保存图像选项
- 使用 PHP 和 JavaScript 在黑莓中下载和保存图像
- 从 Base64 字符串保存图像不会打开
- 使用 Ajax 在 Ruby on Rails 中保存图像
- 如何从加载中保存图像宽度和高度
- 使用 js 保存图像
- 在操作方法中保存图像,然后将 URL 返回给客户端
- 使用图像URL和PHP从远程服务器上传/下载/保存图像到本地服务器