À propos de la conversion entre Canvas et Image

Cet article vous montre comment convertir une image en canevas et comment extraire une image d'un canevas. L'exemple de code est le suivant. Les amis qui en ont besoin peuvent s'y référer. Conversion entre JS Canvas et Image
Démonstration de texte original : Démo de conversion d'image JavaScript Canvas
Lors de la conférence de développement Web Mozilla la semaine dernière, nous avons passé la majeure partie de la journée à discuter des futures applications du marché Mozilla. Instagram, l'application mobile la plus populaire ces derniers temps, a été vendue à FaceBook pour la somme colossale d'un milliard de dollars.
Cela ne me dérange pas de gagner de l'argent supplémentaire, alors j'ai décidé de créer une application de style Instagram (je la partagerai plus tard)

Cet article vous montre comment convertir une image en toile et comment toile extrait une Image .

Convertir l'image en canevas

Pour convertir l'image en canevas (plan de travail, canevas), vous pouvez utiliser la méthode drawImage du contexte de l'élément canevas :

// 把image 转换为 canvas对象 
function convertImageToCanvas(image) { 
// 创建canvas DOM元素，并设置其宽高和图片一样 
var canvas = document.createElement("canvas"); 
canvas.width = image.width; 
canvas.height = image.height; 
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。 
canvas.getContext("2d").drawImage(image, 0, 0); 
return canvas; 
}

Convertir le canevas en image

En supposant que l'image a été traitée sur le canevas, vous pouvez utiliser la méthode suivante pour convertir le canevas en un objet image Image.

// 从 canvas 提取图片 image 
function convertCanvasToImage(canvas) { 
//新Image对象，可以理解为DOM 
var image = new Image(); 
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
// 指定格式 PNG 
image.src = canvas.toDataURL("image/png"); 
return image; 
}

Eh bien ! La conversion d'images en toile est plus facile que vous ne le pensez. Je vous montrerai différentes techniques de traitement d'image à l'avenir. Je pense que vous pourrez utiliser ces techniques à l'avenir. . Gagnez beaucoup d'argent.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment obtenir l'effet d'animation de la rotation de l'image en HTML5

Analyse des attributs HTML5 modifiables

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!