Question

以下代码会将背景颜色和图像设置到画布，但我无法调整上传图像的大小。

var canvas = new fabric.Canvas('canvas'); //设置画布背景颜色
canvas.setBackgroundColor('rgba(255,255,255,255)',canvas.renderAll.bind(canvas);

//上传背景图片

var imageLoader = document.getElementById('upload-bgfile');
        imageLoader.addEventListener('change', handleImage, false);
         function handleImage(e) {  
          var reader = new FileReader();
          reader.onload = function (event){
          var img = new Image();
            img.onload = function(){
                canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
                    originX: 'center',
                    originY: 'center',
                    left: 300,
                    top: 100,   
                });
            };  

            img.src = event.target.result;

          } 

        reader.readAsDataURL(e.target.files[0]);

        }   
        canvas.renderAll();

Answer 1

你应该参考下面的代码，

canvas.setBackgroundColor({source: 'http://fabricjs.com/assets/escheresque_ste.png'}, canvas.renderAll.bind(canvas));

了解更多：http://jsfiddle.net/fabricjs/hXzvk/

使用javascript将背景颜色和图像设置为画布

1 个答案: