Question

我目前正在使用图像编辑器，我将它放在Canvas中，并且它正在更改Canvas内部的图片，但是当你右键单击并保存图像时因为它原来的图像仍然不是编辑的，我也有这个问题，即使它不在画布内。

这里＆＃39; s看起来像在画布中编辑： Edited Image

保存后的样子：Saved Image

这是我的过滤器代码：

<script type="text/javascript">
$(document).ready(function()
{
$(".range").change(add_filter).mousemove(add_filter);
});

function add_filter()
{
var grayscale_val=$("#grayscale").val();
var blur_val=$("#blur").val();
var exposure_val=$("#exposure").val();
var sepia_val=$("#sepia").val();
var opacity_val=$("#opacity").val();

$("#canvas").css("-webkit-filter","grayscale("+grayscale_val+"%) blur("+blur_val+"px) brightness("+exposure_val+"%) sepia("+sepia_val+"%) opacity("+opacity_val+"%)");
}
</script>

这是我的HTML：

<div id="buttons">
<li>GrayScale<br><input id="grayscale" class="range" type="range" min="0" max="100" value="0"></li>

<li>Blur<br><input id="blur" class="range" type="range" min="0" max="10" value="0"></li>

<li>Exposure<br><input id="exposure" class="range" type="range" min="0" max="200" value="100"></li>

<li>Sepia<br><input id="sepia" class="range" type="range" min="0" max="100" value="0"></li>

<li>Opacity<br><input id="opacity" class="range" type="range" min="0" max="100" value="100"></li>


<div id="image_div">
<canvas id="canvas"  id="edit_image" height="600" width="600" ></canvas>
<input type='file' name='img' id='uploadimage' />

</div>

将所选图像上传到画布的代码：

function draw(ev) {
    console.log(ev);
    var ctx = document.getElementById('canvas').getContext('2d'),
        img = new Image(),
        f = document.getElementById("uploadimage").files[0],
        url = window.URL || window.webkitURL,
        src = url.createObjectURL(f);

    img.src = src;
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        url.revokeObjectURL(src);
    }
}

document.getElementById("uploadimage").addEventListener("change", draw, false)

</script>

先谢谢你！

如何下载画布中的已编辑图像？

0 个答案: