MD在线转word文件 https://calc.xycost.com/Chatgpt/MdToWord.aspx
完成后的转换程序：https://calc.xycost.com/Chatgpt/ImageConvert.html
Human: write CSS HTML and JavaScript code that takes input images in any format and convert it into jpeg
Human: 我希望转换后跳出下载提示
Human: 转换后文件名不变，只是后缀变化。并且提示已完成。
Assistant:
Sure, here’s an updated version of the code that keeps the original filename and shows a completion message:
最终在chatgpt提示下完成的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>图片尺寸调整及转换</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Container for the input, preview, and button elements */
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 50px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
}
/* Input element for selecting the image */
#input-image {
width: 300px;
height: 40px;
padding: 10px;
margin: 10px auto;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #eee;
text-align: center;
}
/* Preview image element */
#preview-image {
max-width: 300px;
max-height: 300px;
border: none;
border-radius: 5px;
margin: 10px auto;
display: block;
}
/* Resize and Compress button */
button {
width: 150px;
height: 40px;
margin: 10px auto;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #0077c9;
color: #fff;
cursor: pointer;
text-align: center;
}
button:hover {
background-color: #005f9f;
}
/* Width and Height input element */
input[type="number"] {
width: 100px;
height: 40px;
margin: 10px auto;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #eee;
text-align: center;
}
/* Media query for screen widths smaller than 800px */
@media (max-width: 800px) {
#image {
width: 200px;
height: 200px;
}
}
/* Media query for screen widths smaller than 600px */
@media (max-width: 600px) {
#image {
width: 150px;
height: 150px;
}
}
</style>
</head>
<body>
<div class="content-wrapper">
<hgroup class="title">
<h2>图片文件尺寸调整及格式转换</h2>
</hgroup>
<p>
若要了解有关 海南BIM 的详细信息，请访问 <a href="https://xycost.com" title="海南BIM">https://xycost.com</a>。
该页提供工程相关的 <mark>视频、教程和示例</mark> 以帮助你的工作。
</p>
<p>
若要下载windows桌面版计算器，请访问<a href="独立费在线计算（右下角图标右键关闭）.exe">独立费计算器下载</a>，如下载安装有系统提示，请放行，绝对无任何安全风险。
</p>
</div>
<div class="image-container">
<div id="drop-area">
<input type="file" id="input-image" onchange="previewImage(event)" ondragover="allowDrop(event)" ondrop="dropImage(event)">
</div>
<img id="preview-image" src="#" alt="Image preview">
<br>
<label for="width">宽度:</label>
<input type="number" id="width" value="100">
<br>
<label for="height">高度:</label>
<input type="number" id="height" value="100">
<br>
<label for="format">格式:</label>
<select id="format">
<option value="jpeg">JPEG</option>
<option value="png">PNG</option>
<option value="webp">WebP</option>
</select>
<br>
<button onclick="resizeAndCompress()">调整尺寸</button>
<button onclick="downloadImage()">下载图片</button>
</div>
<script src="JavaScript.js"></script>
</body>
</html>
const input = document.getElementById('input-image');
function previewImage(event) {
var input = event.target;
var preview = document.getElementById("preview-image");
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
preview.src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
function resizeAndCompress() {
var image = document.getElementById("preview-image");
var width = document.getElementById("width").value;
var height = document.getElementById("height").value;
var format = document.getElementById("format").value;
// Set the width and height of the image
image.style.width = width + "px";
image.style.height = height + "px";
// Resize the image using canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0, 0, width, height);
var resized;
if (format === "jpeg") {
resized = canvas.toDataURL("image/jpeg");
} else if (format === "png") {
resized = canvas.toDataURL("image/png");
} else if (format === "webp") {
resized = canvas.toDataURL("image/webp");
}
image.src = resized;
}
function downloadImage() {
var image = document.getElementById("preview-image");
var format = document.getElementById("format").value;
var link = document.createElement("a");
link.href = image.src;
link.download = input.files[0].name.replace(/\.[^/.]+$/, "") + "."+format;
link.click();
}
评论0