jQuery Girl
  1. jQuery Girl
  3. Comment télécharger une image sur une canvas avec Fabric.js?
Intereting Posts
Le texte peut-il être ajouté à un chemin SVG? Menu extensible (avec sous-menus) et sélection en surbrillance d’éléments de liste Survoler les boutons en utilisant jquery? Comment faire la sum des valeurs de la colonne de la table et mettre à jour lorsque supprimer / append une nouvelle ligne Localisation à l’aide de jQuery Plug-in de validation jQuery: validation des cases à cocher avec des noms différents Masquer le référent sur iframe Comment modifier de façon permanente un élément après avoir utilisé .keydown () de jQuery? Reactjs: scroller de contenu personnalisé jQuery avec reactjs comment définir dynamicment les « données affaissé » et « data-theme » dynamic dans jQuery Mobile? webpack jquery et angular – jQuery non défini Y at-il un moyen de simuler en appuyant sur plusieurs touches sur un clic de souris avec javascript? Accéder dynamicment aux propriétés du tableau observable de knockoutjs jQuery .height () ne renvoie pas la bonne valeur Le sélecteur de survol CSS pour la couleur de fond ne fonctionne pas après un changement dynamic de couleur de fond avec jquery

Comment télécharger une image sur une canvas avec Fabric.js?

Je souhaite créer un processus permettant aux utilisateurs de télécharger leurs images, puis de les modifier dans le navigateur dans un canevas avec Fabric.js à l’aide de certains boutons;

Je ne peux pas le faire fonctionner. Mon HTML est:

Le Javascript est le suivant: 

 var canvas = new fabric.Canvas('canvas'); canvas.setHeight(480); canvas.setWidth(640); $('#uploadedImg').change(function () { var imgData = $(this).files[0]; fabric.util.loadImage(imgData, function(img) { var oImg = new fabric.Image(img); oImg.scale(0.2).set({ left: 100, top: 100, }); canvas.add(oImg); }); }); 

     document.getElementById('imgLoader').onchange = function handleImage(e) { var reader = new FileReader(); reader.onload = function (event){ var imgObj = new Image(); imgObj.src = event.target.result; imgObj.onload = function () { var image = new fabric.Image(imgObj); image.set({ angle: 0, padding: 10, cornersize:10, height:110, width:110, }); canvas.centerObject(image); canvas.add(image); canvas.renderAll(); } } reader.readAsDataURL(e.target.files[0]); }

    Vous pouvez télécharger plusieurs images à l’aide du tissu js. Vous pouvez également déplacer un emplacement à un autre endroit du canevas. 

     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: 0,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; } Include it like this: 
       
          
      var canvas = new fabric.Canvas('main-canvas'); canvas.selection = false; var imgElement = document.getElementById("img11"); var imgInstance = new fabric.Image(imgElement, { angle: 0, position: 'absolute', opacity: 1, originX: 'left', originY:'top', meetOrSlice:'slice', }); imgInstance.selectable = false; canvas.add(imgInstance); canvas.renderAll();