【发布时间】：2015-07-15 23:26:53
【问题描述】：
这是一个显示问题的 youtube 视频：https://www.youtube.com/watch?v=znzLQSYlsKM。
我提供视频描述中涉及的所有代码的链接。
我正在使用 js 库对图像应用效果。然后我触发了一个事件，该事件为用户提供了一个下载链接，并为图像动态创建了一个带有 base64 的表单元素。然后我将它传递给一个 php 文件并将其保存到一个文件夹中。您可以下载的图像已应用了效果，但保存的图像将在没有效果的情况下保存。问题是它们都是同一个文件。
JS代码：
function showDownload(canvas){
//this is how i send it to my main page and use ajax script to upload to the php file.
var url = canvas.toDataURL("image/png;base64;");
$('<input/>').attr({
type: 'hidden', id: 'fileroast', name: 'fileroast', value: url
}).appendTo('#output');
// this is how i link the download file
downloadImage.off('click').click(function(){
var url = canvas.toDataURL("image/png;base64;");
downloadImage.attr('href', url);
}).fadeIn();
}
过滤代码：
filters.click(function(e){
e.preventDefault();
var f = $(this);
if(f.is('.active')){
// Apply filters only once
return false;
}
filters.removeClass('active');
f.addClass('active');
// Clone the canvas
var clone = originalCanvas.clone();
// Clone the image stored in the canvas as well
clone[0].getContext('2d').drawImage(originalCanvas[0],0,0);
// Add the clone to the page and trigger
// the Caman library on it
photo.find('canvas').remove().end().append(clone);
var effect = $.trim(f[0].id);
Caman(clone[0], function () {
// If such an effect exists, use it:
if( effect in this){
this[effect]();
this.render();
showDownload(clone[0]);
}
else{
hideDownload();
}
});
});
// Use the mousewheel plugin to scroll
// scroll the div more intuitively
filterContainer.find('ul').on('mousewheel',function(e, delta){
this.scrollLeft -= (delta * 50);
e.preventDefault();
});
【问题讨论】：
-
是
base64的一部分var url = canvas.toDataURL("image/png;base64;");;有效的图像类型参数？见developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…。没有“base64”试过吗？png是否具有类似于gif的动画能力？ -
@guest271314 它本身无效（仅第一个 mime 类型），但在这种情况下，最终结果是相同的，因为无法识别的图像 mime 将默认为 png。
-
@KenFyrstenberg 是的。不确定是否正确解释问题。试图过滤掉可能改变预期结果的可能项目。以前不确定
png的这种效果。也许知道png类型的图像是否可以“动画”类似于gif类型的图像？ -
@guest271314 有apng 但canvas 无法直接保存apng 或动画gif。
-
@KenFyrstenberg 让我进一步解释一下。当您单击过滤器时，它会运行将单击的过滤器应用于图像的过滤器代码。然后它运行 showDownload，它会为您提供下载应用了过滤器的图像的链接。发送到 showDownload 的 clone[0] 数据是过滤后的图像数据。因此，根据逻辑，如果您通过单击基于作为画布传递的克隆中的数据的按钮来下载该图像，那么将图像作为 base64 发送到 php 也应该应用过滤器，因为两者中的图像相同案例。
标签： javascript php jquery html canvas