几年前，我写了一个小工具在图像上覆盖网格，以生成可打印图像以用于十字绣工作。当时，我专门为Firefox编写了此代码，但我通常希望它可以在任何现代浏览器中使用。但是，现在我发现它似乎只能在Firefox中运行！有什么想法吗？
编辑3：要试用该工具，请单击“浏览”并选择一个图像，然后单击“生成”。
编辑1：问题陈述：“当使用Firefox以外的浏览器单击'生成'时，没有图像显示” – Mehdi
或者，更具体地说，我可以轻松地解决此问题以使其在所有浏览器中正常工作吗？
这是旧代码，我不想对其进行大量重写...
编辑2：为了回应IIRC的评论，我试图使img占据包含div的完整大小，因此，position：absolute，wdth：100％，height：100％。但与此同时，我试图调整包含div的大小以适合内容（即网格）。定义大小的是网格。图片应该缩放到该空间...
对我来说，似乎浏览器没有遵循为网格指定的大小，可能是因为它是空的，但是我修复该问题的尝试却失败了……
/*********************************************\
** Copyright © 2017-2019 Thejaka Maldeniya **
\*********************************************/
'use strict';
(function (a) {
a.i()
}(
{
z: 0, // image file data URL
p: '3', // previous value of units (default: Millimeters)
f: { // functions
_: function (l, e, h) { l.addEventListener(e, h, 0) },
l: function (a, f) { // load files
if (f.length) {
f = f[0]
var l = a.u.l, r = new FileReader()
l.name.innerHTML = f.name
a.f._(r, 'loadend', function (e) {
l.preview.src = a.z = e.target.result
})
r.readAsDataURL(f)
}
},
r: function (x) { // round to 3 decimal places
return Math.round(x * 1000) / 1000
},
f: function (a, b) { // get conversion factor
var f = 0
if (a == b) f = 1
else {
// if either a or b is not known, factor will be 0
// first, convert to Millimeters
switch (a) { // previous units value
case '1': // Inches
f = 25.4
break
case '2': // Centimeters
f = 10
break
case '3': // Millimeters
f = 1
}
// second, convert from Millimeters
switch (b) { // new units value
case '1': // Inches
f /= 25.4
break
case '2': // Centimeters
f /= 10
break
case '3': // Millimeters
// no change
}
}
return f
},
c: function () { // units or size value changed
var t = this, l = a.u.l
, r = t.r // round function
, width = l.width.value, height = l.height.value // A4
, mt = l.top.value, mb = l.bottom.value, ml = l.left.value, mr = l.right.value // margins
, w = l.w.value, h = l.h.value // width, height of cell
, m = l.m.value, n = l.n.value // width, height of grid
, s = 'A4' // paper size
, f = t.f(a.p, a.p = l.units.value) // unit conversion factor
, g = t.f('3', l.units.value) // unit conversion factor for default values (currently in Millimeters)
l.width.setAttribute('readonly', '')
l.height.setAttribute('readonly', '')
switch (l.size.value) {
case '0': // Custom
l.width.removeAttribute('readonly')
l.height.removeAttribute('readonly')
g = f
break
case '1': // Letter
width = 216
height = 279
l.rotate.checked = 0
s = 'Letter'
break
case '3': // Legal
width = 216
height = 356
l.rotate.checked = 0
s = 'Legal'
break
case '6': // A3
width = 297
height = 420
l.rotate.checked = 0
s = 'A3'
break
case '7': // A4
width = 210
height = 297
l.rotate.checked = 0
s = 'A4'
break
case '8': // A5
width = 148
height = 210
l.rotate.checked = 0
s = 'A5'
}
l.width.value = r(width * g)
l.height.value = r(height * g)
l.top.value = r(mt * f)
l.bottom.value = r(mb * f)
l.left.value = r(ml * f)
l.right.value = r(mr * f)
l.w.value = r(w * f)
l.h.value = r(h * f)
l.m.value = m
l.n.value = n
}
},
u: {
l: {
style: 0,
ui: 0,
form: 0,
units: 0,
size: 0,
width: 0,
height: 0,
rotate: 0,
top: 0,
bottom: 0,
left: 0,
right: 0,
w: 0,
h: 0,
square: 0,
fill1: 0,
m: 0,
n: 0,
fill2: 0,
color: 0,
white: 0,
black: 0,
file: 0,
browse: 0,
name: 0,
preview: 0,
reset: 0,
print: 0,
page: 0,
content: 0
},
f: {
b: function (f, c) {
return function () {
var a = arguments, n = a.length, b = Array(n), i = 0
for (; i < n; ++i)
b[i] = a[i]
f.apply(c, b)
}
}
},
e: {
document: {
DOMContentLoaded: function () {
}
},
window: {
load: function () {
var a = this, l = a.u.l
a.p = l.units.value
if (l.size.value == '0') {
l.width.removeAttribute('readonly')
l.height.removeAttribute('readonly')
}
if (!l.square.checked)
l.h.removeAttribute('readonly')
}
},
ui: {
dragover: function (e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
drop: function (e) {
e.stopPropagation()
e.preventDefault()
this.f.l(this, e.dataTransfer.files)
}
},
rotate: {
change: function () {
var l = this.u.l, v = l.width.value
l.width.value = l.height.value
l.height.value = v
v = l.top.value
if (l.rotate.checked) {
l.top.value = l.left.value
l.left.value = l.bottom.value
l.bottom.value = l.right.value
l.right.value = v
} else {
l.top.value = l.right.value
l.right.value = l.bottom.value
l.bottom.value = l.left.value
l.left.value = v
}
v = l.w.value
l.w.value = l.h.value
l.h.value = v
v = l.m.value
l.m.value = l.n.value
l.n.value = v
}
},
w: {
change: function (e) {
var l = this.u.l
if (l.square.checked)
l.h.value = e.target.value
}
},
square: {
change: function (e) {
var l = this.u.l
if (e.target.checked) {
l.h.setAttribute('readonly', '')
l.h.value = l.w.value
} else l.h.removeAttribute('readonly')
}
},
file: {
change: function (e) {
e.stopPropagation()
e.preventDefault()
this.f.l(this, e.target.files)
}
},
units: {
change: function () {
this.f.c(this)
}
},
size: {
change: function () {
this.f.c(this)
}
},
fill1: {
click: function () {
var l = this.u.l
if (l.form.reportValidity()) {
l.m.value = (l.width.value - l.left.value - l.right.value) / l.w.value | 0
l.n.value = (l.height.value - l.top.value - l.bottom.value) / l.h.value | 0
}
}
},
fill2: {
click: function () {
var l = this.u.l
if (l.form.reportValidity()) {
var w = (l.width.value - l.left.value - l.right.value) / l.m.value
, h = (l.height.value - l.top.value - l.bottom.value) / l.n.value
if (l.square.checked)
if (w < h) h = w
else w = h
l.w.value = w
l.h.value = h
}
}
},
white: {
click: function () {
this.u.l.color.value = '#ffffff'
}
},
black: {
click: function () {
this.u.l.color.value = '#000000'
}
},
browse: {
click: function () {
this.u.l.file.click()
}
},
reset: {
click: function () {
var l = this.u.l
l.width.setAttribute('readonly', '')
l.height.setAttribute('readonly', '')
l.content.innerHTML = l.style.innerHTML = ''
}
},
print: {
click: function () {
window.print()
}
},
form: {
submit: function (e) {
e.stopPropagation()
e.preventDefault()
var a = this, l = a.u.l, u = l.units.value
, width = l.width.value, height = l.height.value // page size
, mt = l.top.value, mb = l.bottom.value // margins
, ml = l.left.value, mr = l.right.value // margins
, w = l.w.value, h = l.h.value // width, height of cell
, m = l.m.value, n = l.n.value // width, height of grid
switch (u) {
case '1': // Inches
u = 'in'
break
case '2': // Centimeters
u = 'cm'
break
case '3': // Millimeters
default: // use Millimeters
u = 'mm'
}
l.style.innerHTML = '@page{size:' + width + u + ' ' + height + u
+ (l.rotate.checked ? ';landscape' : '')
+ '}@page{margin:' + mt + u + ' ' + mr + u + ' ' + mb + u + ' ' + ml + u
+ '}@media screen{#page{width:' + width + u + ';height:' + height + u
+ '}}#content{width:' + (width - ml - mr) + u + ';height:' + (height - mt - mb) + u
+ '}#grid>colgroup>col{min-width:' + w + u
+ '}#grid>tbody>tr{height:' + h + u
+ '}#grid,#grid>colgroup>col,#grid>tbody>tr{border-color:' + l.color.value
+ '}'
l.content.innerHTML = '<div id="box"><img alt="" id="image" src="' + a.z
+ '"><table id="grid"><colgroup>'
+ '<col>'.repeat(m) + '</colgroup>'
+ '<tr></tr>'.repeat(n)
+ '</table></div>'
}
}
},
i: function (p) {
var t = this, l = t.l, b = t.f.b, e = t.e, i, j, k
for (i in l)
l[i] = document.getElementById(l[i] || i)
l.window = window
l.document = document
for (i in e) {
k = e[i]
for (j in k)
l[i].addEventListener(j, b(k[j], p), 0)
}
}
},
i: function () {
var t = this
t.u.i(t)
}
}
))/*********************************************\
** Copyright © 2017-2019 Thejaka Maldeniya **
\*********************************************/
hr {
border: 1px solid #797;
}
table {
border-collapse: collapse;
}
h1 {
margin-top: 0;
font-size: x-large;
}
h3 {
margin-bottom: 0;
font-size: medium;
}
input, select, button {
margin: 1px;
padding: 1px 4px 2px;
}
input:not([type=checkbox]), select, button {
vertical-align: middle;
}
input[type=checkbox] {
margin-right: 5px;
}
label {
vertical-align: 1px;
}
input, select {
border: 1px solid #898;
background: #efe;
color: #353;
}
select {
padding: 0 0 1px;
}
input[readonly] {
background-color: #cdc;
}
input[type=file] {
display: none;
}
button {
border: 1px solid #898;
border-radius: 6px;
background: #bcb;
padding-right: 6px;
padding-left: 6px;
color: #353;
cursor: pointer;
}
button:hover {
border-color: #899;
background-color: #cdd;
color: #465;
}
.tt {
margin-left: 5px;
}
.tt td {
padding: 2px;
}
#ui {
border: 2px solid #8a8;
border-radius: 10px;
background: #cdc;
padding: 10px;
color: #575;
}
#name, #preview {
border: 1px solid #898;
padding: 5px;
}
#preview {
display: inline-block;
width: 256px;
}
#page, #content {
display: flex;
align-items: center;
justify-content: center;
}
#content {
overflow: hidden;
}
#box {
position: relative;
}
#image {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
object-position: center;
object-fit: contain;
}
#grid {
table-layout: fixed;
margin: auto;
border: 2px solid;
}
#grid > colgroup > col {
border-right: 1px solid;
}
#grid > colgroup > col:nth-child(10n) {
border-right-width: 2px;
}
#grid > tbody > tr {
border-bottom: 1px solid;
}
#grid > tbody > tr:nth-child(10n) {
border-bottom-width: 2px;
}
#footer {
margin-top: 20px;
border-top: 1px solid #797;
padding-top: 6px;
}
@media screen {
#page {
border: 1px solid #898;
}
}
@media print {
#ui {
display: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Cross-Stitch Image Generation Tool</title>
<meta charset="utf-8">
<style id="style"></style>
</head>
<body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-142604605-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-142604605-1');
</script>
<div id="ui">
<h1>Cross-Stitch Image Generation Tool</h1>
<h3>For the most basic usage, Browse an image, then click Generate, then scroll down to view the image. Possibly only works in Firefox...</h3>
<br>
<form id="form">
<table class="tt">
<tr>
<td><label for="units">Units:</label></td>
<td>
<select id="units">
<option value="1">Inches</option>
<option value="2">Centimeters</option>
<option value="3" selected>Millimeters</option>
</select>
</td>
<td colspan="5"></td>
</tr>
<tr>
<td><label for="size">Page Size:</label></td>
<td>
<select id="size">
<option value="0">Custom</option>
<option value="1">Letter</option>
<option value="3">Legal</option>
<option value="6">A3</option>
<option value="7" selected>A4</option>
<option value="8">A5</option>
</select>
</td>
<td><label for="width">Width:</label></td>
<td><input id="width" type="text" required readonly pattern="\d+(.\d+)?" value="210"></td>
<td><label for="height">Height:</label></td>
<td><input id="height" type="text" required readonly pattern="\d+(.\d+)?" value="297"></td>
<td><input id="rotate" type="checkbox"><label for="rotate">Rotate</label></td>
</tr>
</table>
<h3>Margins</h3>
<table class="tt">
<tr>
<td><label for="top">Top:</label></td>
<td><input id="top" type="text" required pattern="\d+(.\d+)?" value="10"></td>
<td><label for="bottom">Bottom:</label></td>
<td><input id="bottom" type="text" required pattern="\d+(.\d+)?" value="10"></td>
</tr>
<tr>
<td><label for="left">Left:</label></td>
<td><input id="left" type="text" required pattern="\d+(.\d+)?" value="10"></td>
<td><label for="right">Right:</label></td>
<td><input id="right" type="text" required pattern="\d+(.\d+)?" value="10"></td>
</tr>
</table>
<h3>Grid</h3>
<table class="tt">
<tr>
<td><label for="w">Cell Width:</label></td>
<td><input id="w" type="text" required pattern="\d+(.\d+)?" value="2"></td>
<td><label for="h">Cell Height:</label></td>
<td><input id="h" type="text" required readonly pattern="\d+(.\d+)?" value="2"></td>
<td><input id="square" type="checkbox" checked><label for="rotate">Same (Square)</label></td>
<td><button id="fill1" type="button">Fill Page</button></td>
</tr>
<tr>
<td><label for="m">Grid Width (cells):</label></td>
<td><input id="m" type="text" required pattern="\d+" value="90"></td>
<td><label for="n">Grid Height (cells):</label></td>
<td><input id="n" type="text" required pattern="\d+" value="130"></td>
<td></td>
<td><button id="fill2" type="button">Fill Page</button></td>
</tr>
<tr>
<td><label for="color">Grid Color:</label></td>
<td>
<input id="color" type="color" value="#ffffff">
<button id="white" type="button">White</button>
<button id="black" type="button">Black</button>
</td>
<td colspan="4"></td>
</tr>
</table>
<h3>Image</h3>
<input id="file" type="file">
<table class="tt">
<tr>
<td><button id="browse" type="button">Browse</button></td>
<td><div id="name">(Select an image)</div></td>
</tr>
<tr>
<td></td>
<td><img id="preview" alt="(No Preview)" src="#"></td>
</tr>
</table>
<br>
<button id="generate">Generate</button>
<button id="reset" type="reset">Reset</button>
<button id="print" type="button">Print</button>
</form>
<div id="footer">
© 2017-2019 Thejaka Maldeniya. All rights reserved.
</div>
</div>
<div id="page">
<div id="content"></div>
</div>
</body>
</html>