使用样式将用户计算机中的图像添加到画布 [英] Add image from user computer to canvas with style

问题描述

我在使用fabric.js玩很多东西。我在。

我正在玩的代码：

  var canvas = new fabric.Canvas（'canvas'）; document.getElementById（'file'）。addEventListener（change，function（e）{var file = e.target.files [ 0]; var reader = new FileReader（）; reader.onload = function（f）{var data = f.target.result; fabric.Image.fromURL（data，function（img）{var oImg = img.set（{ left：0，top：0，angle：00，width：100，height：100}）。scale（0.9）; canvas.add（oImg）.renderAll（）; var a = canvas.setActiveObject（oImg）; var dataURL = canvas.toDataURL（{format：'png'，quality：0.8}）;}）;}; reader.readAsDataURL（file）;}）;  

  canvas {border：1px solid blac k;}  

 < script src =https：/ /ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><script src =https://rawgit.com/kangax/fabric.js/ master / dist / fabric.min.js>< / script>< input type =fileid =file>< br />< canvas id =canvaswidth =450 height =450>< / canvas>  

解决方案

您必须将 stroke 和 strokeWidth 属性设置为完成... ...

  var canvas = new fabric.Canvas（'canvas '）; document.getElementById（'file'）。addEventListener（change，function（e）{var file = e.target.files [0]; var reader = new FileReader（）; reader.onload = function（f）{var data = f.target.result; fabric.Image.fromURL（data，function（img）{var oImg = img.set（{left：40，top：40，angle：00，width：100，height：100，stroke：'＃07C'，// <  - 设置此strokeWidth：5 //<  - 设置此}}。scale（0.9）; canvas.add（oImg）.renderAll（）; var a = canvas.setActiveObject（oImg）; var dataURL = canvas .toDataURL（{format：'png'，quality：0.8}）;}）; }; reader.readAsDataURL（file）;}）;  

  canvas { border：1px solid black;}  

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><script src =https://rawgit.com/kangax/ fabric.js / master / dist / fabric.min.js>< / script>< input type =fileid =file>< br />< canvas id =canvas width =180height =180>< / canvas>  

I'm playing a lot with fabric.js. I read here how to add my own images. How would I do this but give each uploaded photo a certain style? In other words, I'd like each picture uploaded to have a border or stroke to look like this:

.

The code I'm playing with:

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 0,
        top: 0,
        angle: 00,
        width: 100,
        height: 100
      }).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 0.8
      });
    });
  };
  reader.readAsDataURL(file);
});

canvas {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>

解决方案

You would have to set stroke and strokeWidth property for the image object to accomplish that ...

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function (f) {
        var data = f.target.result;
        fabric.Image.fromURL(data, function (img) {
            var oImg = img.set({
                left: 40,
                top: 40,
                angle: 00,
                width: 100,
                height: 100,
                stroke: '#07C', //<-- set this
                strokeWidth: 5  //<-- set this
            }).scale(0.9);
            canvas.add(oImg).renderAll();
            var a = canvas.setActiveObject(oImg);
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.8
            });
        });
    };
    reader.readAsDataURL(file);
});

canvas {border: 1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="180" height="180"></canvas>

这篇关于使用样式将用户计算机中的图像添加到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！