js+canvasは二枚の写真を一枚の写真にまとめる方法を実現します。
本論文の例は、js+canvasが2枚の画像を一つの画像に統合する方法を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
JSとcanvasの合成方式
javaの実現方式
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。
JSとcanvasの合成方式
function drawAndShareImage(){
var canvas = document.createElement("canvas");
canvas.width = 700;
canvas.height = 700;
var context = canvas.getContext("2d");
context.rect(0 , 0 , canvas.width , canvas.height);
context.fillStyle = "#fff";
context.fill();
var myImage = new Image();
myImage.src = "./2.png"; //
myImage.crossOrigin = 'Anonymous';
myImage.onload = function(){
context.drawImage(myImage , 0 , 0 , 700 , 700);
context.font = "60px Courier New";
context.fillText(" ",350,450);
var myImage2 = new Image();
myImage2.src = "./1.png"; //
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function(){
context.drawImage(myImage2 , 175 , 175 , 225 , 225);
var base64 = canvas.toDataURL("image/png"); //"image/png"
var img = document.getElementById('avatar');
// document.getElementById('avatar').src = base64;
img.setAttribute('src' , base64);
}
}
}
PS:オンライン写真とローカル画像は、サーバーでテストするのが一番いいです。javaの実現方式
public static String generateCode(String codeUrl, Integer userId, String userName) {
Font font = new Font(" ", Font.PLAIN, 30);//
String projectUrl = PathKit.getWebRootPath() + "/before/codeImg/";
String imgName = projectUrl + userId + ".png";
try {
//
String imageLocalUrl = projectUrl + "weixincode2.png";
BufferedImage imageLocal = ImageIO.read(new File(imageLocalUrl));
//
BufferedImage imageCode = ImageIO.read(new URL(codeUrl));
//
Graphics2D g = imageLocal.createGraphics();
// ( , , , , , )
g.drawImage(imageCode, 575, imageLocal.getHeight() - 500, 350, 350, null);
//
g.setFont(font);
g.setColor(Color.BLACK);
//
String lastChar = userName.substring(userName.length() - 1);
//
String newUserName = userName.substring(0, 1) + "**" + lastChar + " ";
//
g.drawString(newUserName, 620, imageLocal.getHeight() - 530);
//
g.dispose();
//
File outputfile = new File(imgName);
//
ImageIO.write(imageLocal, "png", outputfile);
} catch (Exception e) {
e.printStackTrace();
}
// ( )
imgName = Constants.PROJECT_URL + "codeImg/" + userId + ".png";
return imgName;
}
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「JavaScript+HTML 5特効と技巧まとめ」、「JavaScript画像操作技術大全書」、「JavaScript図形描画技法のまとめ」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ」本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。