我正在进行Ajax调用,它会返回一些信息,包括图像路径.我在HTML中准备了所有这些信息,这些信息将显示为一种弹出窗口.我只是将popup div的可见性从隐藏切换为可见.
要设置弹出窗口div的位置,我必须根据图像的高度进行计算.因此,在设置位置和将可见性切换为可见之前,我必须等待图像加载以了解其尺寸.
我尝试了递归,setTimeout,完成img属性的技巧,而循环...没有成功.
那么,我该怎么做呢.也许我应该在Ajax调用中返回维度.
如何找到base64图像的宽度和高度
<img id="thumb0" width="200" height="200"
src="data:image/png;base64, ................">
Run Code Online (Sandbox Code Playgroud)
图像属性宽度和高度是不变的,因为我需要将它们显示为缩略图,但原始图像属性不同.
我需要获得原始图像的高度和宽度.
假设我的原始图像高度和宽度为750 X 500
我试过这样但得到了属性的宽度和高度
$("#thumb0").width();
Run Code Online (Sandbox Code Playgroud)
价值是200.
请帮助如何获得图像的原始宽度和高度.
再次感谢所有评论/回答我问题的人
问题解决了: 我无法在生成的PDF上使画布图像看起来更好,项目的截止日期正在结束,最后,我决定将"PDF报告"功能从前端(Angular)移动到后端(python),我已经发布了一个答案(不是我自己的问题的答案,但更像是一个解决方案)
我已将Chart.js替换为Echarts,但模糊的问题仍然存在.我在网上搜索jsPDF和Canvas模糊了很多,看起来画布设置需要自定义,不幸的是,我不知道如何实现它.
我有一个Angular项目,需要下载图表数据的PDF.我选择了Chart.js和jspdf,效果很好.当我在一个页面中打印2个图表时,分辨率是可以的,但是当我尝试在同一页面上打印3个图表时,文本模糊.我已经阅读了这个类似的问题,但没有想出如何在拥有多个图表时更好地解决问题.
HTML代码:
<div class="col-md-4">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-title">Cervical Lateral Flexion</h5>
<!--<p class="card-category">Line Chart</p>-->
</div>
<div class="card-body">
<canvas id="cervicalLateralFlexion"></canvas>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
打字稿代码:
public static buildChart(doc, selector, title, yHeight) {
let height = yHeight;
const canvas = document.querySelector(selector) as HTMLCanvasElement;
doc.setFontSize(h5);
doc.text(leftMargin, yHeight, title);
const canvasImage = canvas.toDataURL('image/png');
height += margin;
doc.addImage(canvasImage, 'PNG', leftMargin, height);
}
Run Code Online (Sandbox Code Playgroud)
有人可以帮忙吗?如何解决这个问题?提前致谢!图1是它在网页上的样子,图像2是PDF文件.
是什么区别width,naturalWidth和clientWidth?
对于图片上传,我编写了以下 html 代码:
<input type="file" id="upload" class="im" onchange="fileSelectHandlerProfile('defaultProfile','true')" style="cursor:pointer"/>
Run Code Online (Sandbox Code Playgroud)
当我们完成选择图像时,
此代码将被触发:
function fileSelectHandlerProfile(title, defalutProfile) {
var oFile;
oFile = $('#thumbUploadProfile')[0].files[0];
var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp|image\/jpg|image\/pjpeg)$/i;
if (!rFilter.test(oFile.type)) {
$('.errorProfile').html('Please select a valid image file (jpg and png are allowed)').show();
}
}
Run Code Online (Sandbox Code Playgroud)
我想检查 oFile 的宽度和高度,怎么可能像 oFile.type?
我有该图像的base64数据。
data:image/png;base64,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
Run Code Online (Sandbox Code Playgroud)
我想获取该图像的文件大小,以便我可以验证文件。如何在javascript中获取文件大小?