Добавить изображение на полотно js canvas из Blob или base64 img src - PullRequest
Новая
       14

Добавить изображение на полотно js canvas из Blob или base64 img src

0 голосов
/ 05 июля 2018

Извините, если задаю неправильный вопрос.

Я преобразовал холст в изображение, и изображение скрыто на странице с классом imgSrc

Источник из изображения холста возвращает объект base64 

<img class="imgSrc" src="data:image/png;base64,ifsdfjdjkdjf;sfjjfskfdjdf">

Я получаю ошибку

Не удалось выполнить drawImage для CanvasRenderingContext2D: предоставленное значение не относится к типу

при попытке добавить изображение на холст с помощью Fabric js 

var canvas = this.__canvas = new fabric.StaticCanvas('canvas1');
var imgElement = document.getElementsByClassName('imgBox');
var imgInstance = new fabric.Image(imgElement, {
 left: 100,
 top: 100,
 height: 30, 
 width: 30
});
canvas.add(imgInstance);

Предполагается ли сначала провести какую-то беседу с изображением src?

1 Ответ

0 голосов
/ 06 июля 2018

getElementsByClassName возвращает список узлов, получает первый элемент по списку [0] и создает объект изображения.

DEMO 

var canvas = new fabric.Canvas('canvas');
var imgElement = document.getElementsByClassName('imgSrc')[0];
var imgInstance = new fabric.Image(imgElement, {
 left: 100,
 top: 100,
 scaleX: 200/imgElement.width,
 scaleY: 200/imgElement.height
});
canvas.add(imgInstance);
canvas {
  border: 1px solid #999;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<img class='imgSrc' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQBAMAAAB8P++eAAAAMFBMVEX////7+/vr6+vNzc2qqqplywBWrQD/Y5T/JTf+AADmAABeeEQvNydqAAAGBAMAAAGoF14oAAAEBUlEQVR42u2WTUwUVxzA/2925LIojsyqCLtMqSQeFJeFROPHstjdNkZdkaiX9mRTovYgSYNFE43Rg5IeNG5SqyaVcGzXkvTm7hZWq9bKriAYYzSLBI3WAplp0jY2kV3fzPuYGcBxD/bmO0zevPeb//f7v0FQ5EDvwf8LFG89ixYDol9Wo+smKal2sHF6kM6q7qbE5tY03d7SHR6ygiuvwY1txkzIlPaD3NQ4Zryk/PCP1wKibBlI97dq+idXUxqgcEkVnruS/smRpuWaCbrHU5pc/wyTQsata0U77wVBTlRP9UNkT9oE61K9AHL9VERbeTVurMjNm54mqrFw8CwKmWBfpf6V2Dx/TdxN3YjMf2JwIEZ8JnjnEbEjvLAQZ1EKlxkciJ9UcdD1Z5ztDmgsgPIrMkWtMgfd41xOYXZOIjUcLB3tdchypHWIgb5k2gH0nE0zMHjRCRTLWxgY/VQrDuybcAQ/DDEwmwEn8COlSDBcTUE0GXcEjRzqoDDhDH7sfccg2szAt9hogjBFQFRmDyd9N1VTEFegXXKEVKQFJHEUd0DSKhLthIm0HSQpnNdCNizgq147GP0m7QTygNMye6NqM9ekwlG4kLI5I4cMZ+bVhMA8MwX1rw9oIjakAYX6jXlBRRJ4BF6PwmRSfQyLFhJwWy/IG8khKuirljODG0DfGAd3qCBNEol5vCqFAxqYLeUyB0H2A2Q0DspRD3BQfJEc5KBl6KprG6pNEPqqfkKzOQBsha2bQeVw6g3nSySaGYgb99ylhsLDLVYQ3E+oozOGHKzVbCBs+HkuUm6ivd4E0ZYeNTPTTrn51+0wA9TJgpZVLeaV1y+4yS8c64W0/AcFTBCHK/fFEMwFAmo4KRldE0ZxsF8cGbTuzYqHtOz8t6e8TMk5CcjNSC+kdcfgPyag9AoDhUQARmvAcIiAW3v0JzWJg64BJXdBQ21+/b4zwMqRW5dA2h3I7+onYJd+Y4i3FbyMxz4hxE7hS2MBdSq6Fgq6Bny/dxv6Sk76COj6Yz91ZG8dToQ7oYNCqu4QjX9FK5UoPt/PXO701mruhwcxGP2ecahzzxBtUtlzLHclsXtBA6wc+a2brlUc8TCvg5cPM7LiaOPT8Y4ub3bpAbqy+MQ18xRmvIe5nr83YXDt8Nca0/GveWniSHByybEVwx1dD1ccYB/6yF8DTaGcYLFA391o6DjjohaWfKXQ/xCWazmhPDhNbYf2WH4fse9zhRUkLwrXlUD+9iVD5HR77KWheclxkqsZ1bM+pqcWZ2xVe0zXjPb6pyO8IK1l5trcA7mLKuo48+VpQG0BuPmZeTbs9Vi+9oQyqv6Ieyou4FybU+HqRS4o+TH1VG7MvgFFjvfguwFfA4FobmCxcnTPAAAAAElFTkSuQmCC"/>

<canvas id="canvas" width="400" height="400"></canvas>
...