Question

到目前为止，我有this piece of code;

    var imageLoader = document.getElementById('imageLoader');
        imageLoader.addEventListener('change', handleImage, false);
    var canvas = document.getElementById('imageCanvas');
    var ctx = canvas.getContext('2d');

    function handleImage(e){
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img,0,0);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);     
    }

将图像绘制到画布上，然后我有this code

            %img#example{"data-caman-hidpi" => "images/example1_1200.jpg", src: "images/example1_600.jpg"}/

操纵存储在图像中的图像/但是对画布不熟悉并且没有太多的javascript知识，我不知道如何合并这两段代码以便它们一起工作。我希望能够从我的计算机中选择一个图像，然后将其绘制到画布上，然后才能使用Caman.js来操作此图像。任何帮助将不胜感激。

Answer 1

我有同样的问题。对我来说，修复是将此属性添加到canvas元素'data-caman-hidpi-disabled'。

该错误仅影响视网膜屏幕。更多信息请访问：https://github.com/meltingice/CamanJS/issues/188

Answer 2

我认为将图像加载到<img>元素然后在其上调用CamanJS的构造函数会更容易。这会将<img>元素替换为<canvas>元素

HTML

<img src="something" id="imagesrc">

的Javascript

Caman('#imagesrc', function(){
   //manipulate image
});

如果您想直接使用Canvas对象，则使用相同的Javascript代码，但使用canvas对象。 Caman将操纵相同的画布对象。

Caman('#imageCanvas',function(){
  //manipulate image
});

此处有更多信息：http://camanjs.com/guides/#BasicUsage

尝试将图像绘制到画布，然后使用Caman.js来操作此图像

2 个答案: