1 line
8.6 KiB
JavaScript
1 line
8.6 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[252],{312:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return u}));var a=n(2),i=n(6),r=(n(0),n(467)),o={sidebar_label:"Images",title:"Images"},l={unversionedId:"guides/images",id:"guides/images",isDocsHomePage:!1,title:"Images",description:"Images are very important for making your app more interesting.",source:"@site/docs/guides/images.md",slug:"/guides/images",permalink:"/docs/guides/images",editUrl:"https://github.com/nodegui/nodegui/edit/master/website/docs/guides/images.md",version:"current",sidebar_label:"Images",sidebar:"guides",previous:{title:"Scroll Area",permalink:"/docs/guides/scroll-view"},next:{title:"Drag and drop",permalink:"/docs/guides/drag-drop"}},s=[{value:"Loading an image using a url",id:"loading-an-image-using-a-url",children:[]},{value:"Some tips",id:"some-tips",children:[{value:"Showing large images",id:"showing-large-images",children:[]},{value:"Animated images",id:"animated-images",children:[]}]}],c={rightToc:s};function u(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Images are very important for making your app more interesting."),Object(r.b)("p",null,"In NodeGui, QLabel is typically used for displaying text, but it can also display an image."),Object(r.b)("p",null,"A very minimal example would look like this:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"const { QMainWindow, QPixmap, QLabel } = require('@nodegui/nodegui');\n\nconst win = new QMainWindow();\nconst label = new QLabel();\n\nconst absoulteImagePath = '/Users/atulr/Project/nodegui/nodegui/extras/assets/logox200.png';\nconst image = new QPixmap();\nimage.load(absoulteImagePath);\n\nlabel.setPixmap(image);\n\nwin.setCentralWidget(label);\nwin.show();\nglobal.win = win;\n")),Object(r.b)("p",null,"Here,"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"We first create a label using QLabel."),Object(r.b)("li",{parentName:"ul"},"Then we create an instance of QPixmap. ",Object(r.b)("inlineCode",{parentName:"li"},"QPixmap")," is used to represent the image in memory. QPixmap is not a widget, so it can\u2019t be shown on the screen as it is."),Object(r.b)("li",{parentName:"ul"},"Hence, we use QLabel instance and set QPixmap to it.")),Object(r.b)("p",null,"The result would look like this:"),Object(r.b)("img",{src:"https://github.com/nodegui/nodegui/releases/download/assets/image-example.png",alt:"image example",style:{width:"100%",maxWidth:400}}),Object(r.b)("h2",{id:"loading-an-image-using-a-url"},"Loading an image using a url"),Object(r.b)("p",null,"Lets say we want to load an image from a URL on the internet. In this case we can't use the ",Object(r.b)("inlineCode",{parentName:"p"},"load()")," method of QPixmap since its only reserved for local file system images."),Object(r.b)("p",null,"Instead, we\u2019ll download the image using axios as a buffer and use the QPixmap's method loadFromData instead."),Object(r.b)("p",null,"So let\u2019s start with the axios installation:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"npm i axios\n")),Object(r.b)("p",null,"Now let\u2019s create a function that will take a URL as a parameter and will return a configured QMovie instance for the GIF:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"const axios = require('axios');\n\nasync function getPixmap(url) {\n const { data } = await axios.get(url, { responseType: 'arraybuffer' });\n const pixmap = new QPixmap();\n pixmap.loadFromData(data);\n return pixmap;\n}\n")),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"getPixmap")," function takes in a URL, tells axios to download the image as a buffer, and then uses that buffer to create a QPixmap instance."),Object(r.b)("p",null,"Since getPixmap returns a promise, we need to make some changes to the code. After some minor refactoring, we end up with the following."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-js"}),"const { QMainWindow, QPixmap, QLabel } = require('@nodegui/nodegui');\nconst axios = require('axios');\nasync function getPixmap(url) {\n const { data } = await axios.get(url, { responseType: 'arraybuffer' });\n const pixmap = new QPixmap();\n pixmap.loadFromData(data);\n return pixmap;\n}\nasync function main() {\n const win = new QMainWindow();\n const label = new QLabel();\n const image = await getPixmap('https://upload.wikimedia.org/wikipedia/commons/9/96/Nature-morocco.jpg');\n label.setPixmap(image);\n win.setCentralWidget(label);\n win.show();\n global.win = win;\n}\nmain().catch(console.error);\n")),Object(r.b)("p",null,"And the result would look like this:"),Object(r.b)("img",{src:"https://github.com/nodegui/nodegui/releases/download/assets/image-from-url.png",alt:"image url example",style:{width:"100%",maxWidth:400}}),Object(r.b)("h2",{id:"some-tips"},"Some tips"),Object(r.b)("h3",{id:"showing-large-images"},"Showing large images"),Object(r.b)("p",null,"The above examples wont allow you to show a huge image without either cutting it off or making the widget huge."),Object(r.b)("p",null,"In order to do that:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"You can create the image instance using QPixmap"),Object(r.b)("li",{parentName:"ul"},"Set the image instance to a QLabel"),Object(r.b)("li",{parentName:"ul"},"And finally set the QLabel to a QScrollArea that allows you to scroll the image if the size of the image is too big.")),Object(r.b)("h3",{id:"animated-images"},"Animated images"),Object(r.b)("p",null,"In order to use animated images"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"Instead of QPixmap use QMovie"),Object(r.b)("li",{parentName:"ul"},"And instead of a label's ",Object(r.b)("inlineCode",{parentName:"li"},"setPixmap")," method use ",Object(r.b)("inlineCode",{parentName:"li"},"setMovie"))),Object(r.b)("p",null,"More details on it can be seen on this blog post : ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.sitepoint.com/build-native-desktop-gif-searcher-app-using-nodegui/"}),"https://www.sitepoint.com/build-native-desktop-gif-searcher-app-using-nodegui/")))}u.isMDXComponent=!0},467:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return d}));var a=n(0),i=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var c=i.a.createContext({}),u=function(e){var t=i.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=u(e.components);return i.a.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},b=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,o=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),m=u(n),b=a,d=m["".concat(o,".").concat(b)]||m[b]||p[b]||r;return n?i.a.createElement(d,l(l({ref:t},c),{},{components:n})):i.a.createElement(d,l({ref:t},c))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,o=new Array(r);o[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:a,o[1]=l;for(var c=2;c<r;c++)o[c]=n[c];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"}}]); |