手key一个图片占位自动生成图片的工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>autoCreateImg</title>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<style>
.XXX{
color: rgba(255,255,255,1.0);
}
</style>
</head>
<body>
<div class="page" style="margin-top:50px;margin-left: 60px;">
<h1 style="text-align: center;" >Auto-Create-Image</h1>
<div class="XXX">AutoAutoAutoAutoAutoAuto</div>
<div class="setting-list" >
<div class="list-item" style="margin-bottom: 60px;">
<span style="font-size: 20px;margin-right: 10px;">宽度：</span>
<input id="width-content" style="height: 32px;width: 200px;">
</div>
<div class="list-item" style="margin-bottom: 60px;">
<span style="font-size: 20px;margin-right: 10px;">高度：</span>
<input id="height-content" style="height: 32px;width: 200px;">
</div>
<div class="list-item" style="margin-bottom: 60px;" id="radio-fa">
<span style="font-size: 20px;margin-right: 10px;">图片类型：</span>
<input type="radio" name="image-type" id="png" value="png" style="width: 40px;cursor: pointer;" checked>png
<input type="radio" name="image-type" id="jpeg" value="jpg" style="width: 40px;cursor: pointer;margin-left: 10px">jpg
<input type="radio" name="image-type" id="gif" value="gif" style="width: 40px;cursor: pointer;margin-left: 10px" disabled>gif
</div>
<div style="margin-bottom: 50px;">Gif类型正在开发中，现实现方式：先导出对应的大小的png，在线转为对应大小的gif，在线到处网站：<a href="https://cn.onlineconvert.com/png-to-gif">在线转换</a></div>
</div>
<div ><span id="btn" style="cursor:pointer;padding: 6px 60px;background-color: #0170fe;color:#fff;border-radius: 60px;margin-left: 100px;">导出</span></div>
<div style="margin-top:100px">
<div style="font-size: 20px ;margin-right: 10px;">预览：</div>
<div id="content" style="color:#FFF; font-size:20px; text-align:left; margin-top: 50px;margin-left: 100px;"></div>
</div>
</div>
</body>
<script>
window.onload=function(){
const widthBox=document.getElementById("width-content");
const heightBox=document.getElementById("height-content");
const radioFa = document.getElementById('radio-fa');
const imgContentFa = document.getElementById("content");
const btnEl = document.getElementById("btn");
var imgUrl = ''
widthBox.oninput = (e)=>{
if(e.target.value && Number(e.target.value)>0){
goPreview()
}
}
heightBox.oninput = (e)=>{
if(e.target.value && Number(e.target.value)>0){
goPreview()
}
}
radioFa.onclick = (e)=>{
if(e.target.name=="image-type"){
goPreview()
}
}
function goPreview(){
if(imgContentFa.childNodes.length){
imgContentFa.childNodes.forEach(item=>imgContentFa.removeChild(item))
}
const shouldWidth=widthBox.value;
const shouldHeight=heightBox.value;
const imageTypes = document.getElementsByName('image-type');
for (var i = 0, length = imageTypes.length; i < length; i++) {
if (imageTypes[i].checked) {
shouldImageType=imageTypes[i].value;
break;
}
}
if(Number(shouldWidth)>0&&Number(shouldHeight)>0&&shouldImageType){
if(!(/^[1-9]\d*$/g.test(shouldWidth))){
alert("请输入图片有效宽度！")
return false;
}
if(!(/^[1-9]\d*$/g.test(shouldHeight))){
alert("请输入图片有效高度！")
return false;
}
if(Number(shouldWidth)>5000 || Number(shouldHeight)>5000){
alert("图片尺寸过大，无法绘制，请输入5000以内有效尺寸！")
return false;
}
const imgRule = shouldWidth + 'X' + shouldHeight
imgUrl = Mock.Random.image(imgRule, '#c6c6c6', '#0170fe', shouldImageType,'');
let newImg = new Image()
newImg.src = imgUrl
imgContentFa.append(newImg)
}
}
btnEl.onclick = () => {
const shouldWidth=document.getElementById("width-content").value;
const shouldHeight=document.getElementById("height-content").value;
let shouldImageType=''
const imageTypes = document.getElementsByName('image-type');
for (var i = 0, length = imageTypes.length; i < length; i++) {
if (imageTypes[i].checked) {
shouldImageType=imageTypes[i].value;
break;
}
}
if(!(/^[1-9]\d*$/g.test(shouldWidth))){
alert("请输入图片有效宽度！")
return;
}
if(!(/^[1-9]\d*$/g.test(shouldHeight))){
alert("请输入图片有效高度！")
return;
}
if(!shouldImageType){
alert("请选择图片类型！")
return;
}
if(shouldWidth&&shouldHeight&&shouldImageType){
const element = document.querySelector("#content");
element.style.width = shouldWidth + 'px';
element.style.height = shouldHeight + 'px';
element.style.lineHeight = shouldHeight + 'px';
element.innerHTML = shouldWidth + 'X' + shouldHeight
html2canvas(element,{
scale:1,
width:shouldWidth,
height:shouldHeight
}).then(canvas => {
let newImg = new Image()
newImg.setAttribute("crossOrigin", 'Anonymous')
if(shouldImageType==="jpg"){
newImg.src = canvas.toDataURL("image/jpeg")
}else{
newImg.src = canvas.toDataURL("image/png")
}
let a = document.createElement('a')
document.body.appendChild(a)
a.href = newImg.src
a.download = shouldWidth + 'X' + shouldHeight
a.click()
document.body.removeChild(a)
})
}
}
}
</script>
</html>
