この表紙写真は、22 年の帰り道で撮影されたもので、私の WeChat の背景写真でもあります。都会の煙火の匂いが漂う写真が好きで、静かな生活がすべてうまくいっているように感じさせます。
ずっと自分自身の週刊を書きたいと思っていましたが、今になってようやく始めました。これは最初の記事であり、生活と同じように、それを「新たな始まり」と定義します。
記事#
動画#
感想#
今週、ChatGPT に対して新たな感想を持ちました。それは、非専門家でも簡単に作品を作成するのに役立つことです。
例：コード開発に詳しくない一般の人が、次の機能を実現したいと思った場合：ローカルブラウザで画像にウォーターマークを追加し、ウォーターマークの色、透明度、傾斜角度を調整し、リアルタイムでプレビューすることができます。
ソースコード：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>画像ウォーターマークツール</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#imageCanvas {
border: 1px solid #ddd;
max-width: 500px; /* 最大幅制限 */
max-height: 500px; /* 最大高さ制限 */
}
div {
margin-top: 20px;
}
</style>
</head>
<body>
<h2>画像ウォーターマークツール</h2>
<input type="file" id="imageInput" accept="image/*" />
<br>
<canvas id="imageCanvas"></canvas>
<br>
<div>
<label>ウォーターマークテキスト：<input type="text" id="watermarkText" /></label>
<label>色：<input type="color" id="watermarkColor" /></label>
<label>透明度：<input type="range" id="watermarkOpacity" min="0" max="1" step="0.1" value="1" /></label>
<label>傾斜角度：<input type="range" id="watermarkAngle" min="0" max="360" value="0" /></label>
<button id="applyWatermark">ウォーターマークを適用</button>
</div>
<script>
const imageInput = document.getElementById('imageInput');
const imageCanvas = document.getElementById('imageCanvas');
const ctx = imageCanvas.getContext('2d');
let uploadedImage = null;
// 画像が選択されたときの処理
imageInput.addEventListener('change', function (e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function (event) {
const img = new Image();
img.onload = function () {
const scale = Math.min(500 / img.width, 500 / img.height);
const width = img.width * scale;
const height = img.height * scale;
imageCanvas.width = width;
imageCanvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
uploadedImage = img;
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
});
// ウォーターマークを適用
document.getElementById('applyWatermark').addEventListener('click', function () {
if (!uploadedImage) return;
ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
const scale = Math.min(500 / uploadedImage.width, 500 / uploadedImage.height);
const width = uploadedImage.width * scale;
const height = uploadedImage.height * scale;
ctx.drawImage(uploadedImage, 0, 0, width, height);
const text = document.getElementById('watermarkText').value;
const color = document.getElementById('watermarkColor').value;
const opacity = document.getElementById('watermarkOpacity').value;
const angle = document.getElementById('watermarkAngle').value;
ctx.save();
ctx.globalAlpha = opacity;
ctx.fillStyle = color;
ctx.font = "30px Arial";
ctx.translate(imageCanvas.width / 2, imageCanvas.height / 2);
ctx.rotate(angle * Math.PI / 180);
// 複数行のウォーターマークを描画
const lineHeight = 40; // 行の高さ
const lines = text.split('\n'); // 改行文字でテキストを分割
for (let i = 0; i < lines.length; i++) {
ctx.fillText(lines[i], -ctx.measureText(lines[i]).width / 2, i * lineHeight);
}
ctx.restore();
});
</script>
</body>
</html>