Open landv opened 3 years ago
https://www.cnblogs.com/landv/p/13273875.html 阅读目录(Content)
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法
引言
回到顶部(go to top)
使用HTML5画布技术,你可以在浏览器客户端用JavaScript绘制出各种美丽酷炫的图案,这些图案是不能直接保存的,本身也不是图片形式。
幸运的是,画布(canvas)对象有一个非常有用的方法:toDataURL()。这个方法能把画布里的图案转变成base64编码格式的png,然后返回 Data URL数据。
toDataURL()
var strDataURI = oCanvas.toDataURL(); // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
而且,如果你给toDataURL()传入mine类型的参数,你还可以将画布转变成其它格式的图片。
var strDataURI = oCanvas.toDataURL("image/jpeg"); // returns "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..."
现在,有了 Data URL数据后,我们可将这些数据直接填充到<img>元素里,或者我们可以直接从浏览器里下载它们。
<img>
上面我提到的两个js包也就是封装了一些方便的方法:
/* * Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... } */ var oCanvas = document.getElementById("thecanvas"); Canvas2Image.saveAsPNG(oCanvas); // 这将会提示用户保存PNG图片 Canvas2Image.saveAsJPEG(oCanvas); // 这将会提示用户保存JPG图片 Canvas2Image.saveAsBMP(oCanvas); // 这将会提示用户保存BMP图片 // 返回一个包含PNG图片的<img>元素 var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true); // 返回一个包含JPG图片的<img>元素 var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); // 返回一个包含BMP图片的<img>元素 var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); // 这些函数都可以接受高度和宽度的参数 // 可以用来调整图片大小 // 把画布保存成100x100的png格式 Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);
你也许注意到了saveAsBMP这个函数,实际上没有浏览器直接支持转化成BMP格式,但我们可以借用getImageData()方法实现对它的支持,这个方法提供给我们从画布里直接读取原始像素的功能。
有了这些数据,我们可以构造出BMP格式图片(这种格式非常的简单)。
对于大个的图片,转化成BMP格式会需要几秒钟的时间,但小图片就非常的快了,不会有延迟的感觉。
事件》CornerstoneViewportDownloadForm.js》ViewportDownloadForm.js
采用绝对定位
document.querySelector("#root > div.FlexboxLayout > div.main-content > div > div > div > div > div.viewport-element > canvas").toDataURL();
采用class定位
document.querySelector(".cornerstone-canvas").toDataURL();
原文地址:https://www.cnblogs.com/HavenLau/p/10476508.html
元素
元素的第一个字母
元素的第一行
元素是其父级的第一个子级的样式。
元素之前插入内容
元素之后插入内容
https://www.cnblogs.com/landv/p/13273875.html 阅读目录(Content)
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法
引言
回到顶部(go to top)
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法
将画布(canvas)图像保存成本地图片的方法
使用HTML5画布技术,你可以在浏览器客户端用JavaScript绘制出各种美丽酷炫的图案,这些图案是不能直接保存的,本身也不是图片形式。
幸运的是,画布(canvas)对象有一个非常有用的方法:
toDataURL()
。这个方法能把画布里的图案转变成base64编码格式的png,然后返回 Data URL数据。而且,如果你给
toDataURL()
传入mine类型的参数,你还可以将画布转变成其它格式的图片。现在,有了 Data URL数据后,我们可将这些数据直接填充到
<img>
元素里,或者我们可以直接从浏览器里下载它们。上面我提到的两个js包也就是封装了一些方便的方法:
你也许注意到了saveAsBMP这个函数,实际上没有浏览器直接支持转化成BMP格式,但我们可以借用getImageData()方法实现对它的支持,这个方法提供给我们从画布里直接读取原始像素的功能。
有了这些数据,我们可以构造出BMP格式图片(这种格式非常的简单)。
对于大个的图片,转化成BMP格式会需要几秒钟的时间,但小图片就非常的快了,不会有延迟的感觉。
OHIF图片下载按钮改写为直接下载图片:
事件》CornerstoneViewportDownloadForm.js》ViewportDownloadForm.js
采用绝对定位
采用class定位
querySelector() 选择器语法
原文地址:https://www.cnblogs.com/HavenLau/p/10476508.html
元素
元素
元素
元素
元素
元素的第一个字母
元素的第一行
元素是其父级的第一个子级的样式。
元素之前插入内容
元素之后插入内容
元素