0

到目前为止，我有这段代码；

    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]);     
    }

将图像绘制到画布上，然后我有这段代码

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

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

4

2 回答 2

1

我有同样的问题。我的解决方法是将此属性添加到画布元素“data-caman-hidpi-disabled”。

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

于 2018-03-28T00:07:30.593 回答
0

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

HTML

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

Javascript

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

如果您想像您所做的那样直接使用 Canvas 对象，您可以使用相同的 Javascript 代码，但使用您的 canvas 对象。卡曼将操纵相同的画布对象。

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

更多信息在这里：http ://camanjs.com/guides/#BasicUsage

于 2013-12-18T20:47:03.350 回答