为什么这仅在Firefox中有效?为什么不使用Chrome,Edge,Safari?

时间:2019-07-18 10:04:18

标签: javascript html css

几年前,我写了一个小工具在图像上覆盖网格,以生成可打印图像以用于十字绣工作。当时,我专门为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">
			&copy; 2017-2019 Thejaka Maldeniya. All rights reserved.
		</div>
	</div>
	<div id="page">
		<div id="content"></div>
	</div>
</body>
</html>

0 个答案:

没有答案